图片全部加载完成之后再显示页面ui,公司项目里用上,自己写的几行代码
说明:
-----onload事件 这里我并没有考虑ie的兼容性 因为项目是移动端的;
-----求大神指正~
-----自己测试正常 页面没加载完之前会有一个提示
/*******************************下面是代码*************************************/
//loding
//创建一个显示loding字样的遮罩
var zhezhao1 = "<div class='zhezhao1' style='width:100%;height:"+$(window).height()+"px; position:fixed; top: 0; left: 0; z-index:2999;'>";
zhezhao1 += "<div class='zhezhaobg' style='width:100%;height:100%; background-color:#000000;opacity:0.8;'><\/div>";
zhezhao1 += "<div style='position:absolute;top:0;bottom:0;left:0;right:0; margin:auto; width:3rem;height:1rem; font-size:0.6rem; color:#ffcb99;'>LODING...<\/div>"
zhezhao1 +="</div>";
//把所有的img文件放到数字imgattr里 并事先准备好对象变量 循环变量 imglength;
var imgattr=new Array(),i=0,imgatrlen,imgobj=new Array();
$('body').append(zhezhao1);
imgattr = [
'/jiuzhuang/img/bz-bg.jpg',
'/jiuzhuang/img/content-tibg.jpg',
'/jiuzhuang/img/dl.png',
'/jiuzhuang/img/leftbar-bg.png',
'/jiuzhuang/img/leftbar-bg2.png',
'/jiuzhuang/img/leftbaricon.png',
'/jiuzhuang/img/main-bg.jpg',
'/jiuzhuang/img/offsrk-bg.jpg',
'/jiuzhuang/img/_MG_2825.jpg',
'/jiuzhuang/img/qywh.jpg'
];
imgatrlen = imgattr.length;
var loadlen = 0;
//这里用了一个递归函数
lodingpo(i,imgatrlen);
function lodingpo(i,imgatrlen){
imgobj = new Image();
imgobj.src=imgattr[i];
//加载完成loadlen++ 并且形成一个递归循环
imgobj.onload = function(){
loadlen++;
if(loadlen>=loadlen){
$('.zhezhao1').remove();
}
i++;
if(i<imgatrlen){
lodingpo.callee(i,imgatrlen);
}else{
$('.zhezhao1').remove();
}
}
}
//加载超时 10秒
setTimeout(function(){
$('.zhezhao1').remove();
},10000);
图片全部加载完成之后再显示页面ui,公司项目里用上,自己写的几行代码的更多相关文章
- 在页面加载前先出现加载loading,页面加载完成之后再显示页面
在此加入一个关于页面加载成功之前先展现一个loading的案例: 如下代码写入js里放在html头部即可实现需求:添加的可以自己在css文件设置宽高,也可以放入一个background的gif的loa ...
- 八爪鱼采集器︱加载更多、再显示20条图文教程(Xpatth、Ajax)
每每以为攀得众山小,可.每每又切实来到起点,大牛们,缓缓脚步来俺笔记葩分享一下吧,please~ --------------------------- 由于代码布置采集器比较麻烦,又很早知道八爪鱼采 ...
- php页面加载完毕后再显示购买按钮
php页面加载完毕后再显示购买按钮 $document.ready(function(){ $("#buybotton").show()})
- 利用简洁的图片预加载组件提升h5移动页面的用户体验
在做h5移动页面,相信大家一定碰到过页面已经打开,但是里面的图片还未加载出来的情况,这种问题虽然不影响页面的功能,但是不利于用户体验.抛开网速的原因,解决这个问题有多方面的思路:最基本的,要从http ...
- css实现图片未加载完成时占位显示
通过css控制,可以实现加载网络图片时,未加载完成的时候显示本地一张占位图,加载完成后显示网络图片: 原理:通过在img标签的after伪元素上添加一张占位图,并且img都设置为position:re ...
- Android图片异步加载框架Android-Universal-Image-Loader
版权声明:本文为博主原创文章,未经博主允许不得转载. Android-Universal-Image-Loader是一个图片异步加载,缓存和显示的框架.这个框架已经被很多开发者所使用,是最常用的几个 ...
- JS图片懒加载
简介 当页面图片太多时,加载速度就会很慢.尤其是用2G/3G/4G访问页面,不仅页面慢,而且还会用掉很多流量.图片懒加载的原理就是将页面内所有需要加载的图片全部换成一张默认的图片(一般尺寸很小),只有 ...
- 代码: 两列图片瀑布流(一次后台取数据,图片懒加载。下拉后分批显示图片。图片高度未知,当图片onload后才显示容器)
代码: 两列图片瀑布流(一次后台取数据,无ajax,图片懒加载.下拉后分批显示图片.图片高度未知,当图片onload后才显示容器) [思路]: 图片瀑布流,网上代码有多种实现方式,也有各类插件.没找到 ...
- [iOS微博项目 - 1.8] - 各种尺寸图片加载 & 控件不显示研究
A. 图片的加载: [UIImage imageNamed:@"home"]; 加载png图片 一.非retina屏幕 1.3.5 inch(320 x 480) * ...
随机推荐
- SQL Server 2016 CTP2.3 的关键特性
SQL Server 2016 CTP2.3 的关键特性 数据库方面的增强 Row Level Security已经支持In-memory OLTP 表.用户现在可以对内存优化表实施row-level ...
- Apache许可协议Open RIA Services
Jeff Handley's进行了多年的项目--基于一份开源许可发布WCF RIA Services.遵循Apache 2许可,捐赠给Outercurve基金会的ASP.NET Open Source ...
- GOTO Berlin: Web API设计原则
在邮件列表和讨论区中有很多与REST和Web API相关的讨论,下面仅是我个人对这些问题的一些见解,并没有绝对的真理,InnoQ的首席顾问Oliver Wolf在GOTO Berlin大会上开始自己的 ...
- Redis系列(三)-Redis发布订阅及客户端编程
阅读目录 发布订阅模型 Redis中的发布订阅 客户端编程示例 0.3版本Hredis 发布订阅模型 在应用级其作用是为了减少依赖关系,通常也叫观察者模式.主要是把耦合点单独抽离出来作为第三方,隔离易 ...
- .NET项目版本号的小随笔
[题外话] 一直以来都对.NET项目中的几个版本号(AssemblyVersion.AssemblyFileVersion.AssemblyInformationalVersion)以及版本号中的Re ...
- 【javascript 技巧】Array.prototype.slice的妙用
Array.prototype.slice的妙用 开门见山,关于Array 的slice的用法可以参考这里 http://www.w3school.com.cn/js/jsref_slice_arra ...
- ajax的post方式和get方式比较,以及需要注意的地方
说明:测试所用的js框架为kissy,后端语言为php 写在前面 目前我们可以将ajax请求的情形按照不同的类型进行分类,比如页面编码:utf-8 or gbk; ajax 传参方式 post or ...
- 我的LESS编译方案
背景 近期项目前端决定使用less,简单介绍一下,详细信息有兴趣查看官方文档(http://www.lesscss.net/article/home.html) LESSCSS是一种动态样式语言,属于 ...
- Stored Procedure 里的 WITH RECOMPILE 到底是干麻的?
在 SQL Server 创建或修改「存储过程(stored procedure)」时,可加上 WITH RECOMPILE 选项,但多数文档或书籍都写得语焉不详,或只解释为「每次执行此存储过程时,都 ...
- Java中迭代器
任何容器类,都必须有某种方法可以插入元素并将它们再次取回,毕竟,持有事物是容器最基本的工作,对于List,add()是出入元素的方法之一,而get()是取出元素的方法之一. 如果从更高层的角度思考,会 ...