JavaScript & jQuery完美判断图片是否加载完毕


Posted in Javascript onJanuary 08, 2017

众所周知,常见瀑布流当鼠标滚动到浏览器底部的时候,就会发起一个ajax的请求。在服务端生成item列表后,通过 js append到相应的div里边。

看起来很简单的样子,关键问题就出在图片的加载问题上,图片一般都放在服务器上,通过http下载到客户端。

例如我的图片地址:

http://xxx.xxx.com/sc/item/cover/9-4352-c400.jpg

而图片下载到本地是需要一定时间的(网速快的路过)。当图片还没有下载完的时候,使用js获取到元素的宽高将会是0

有的同学说了我使用jquery的ready不就好了。如下

$(document).ready(function(){
 // 在这里写你的代码...
});

如果这么简单就好了,我这里就说下ready与window.onload的区别。

jquery的ready只是dom的结构加载完毕,便视为加载完成。(缺点是图片没有加载完毕,宽高为0,程序出错)

js的window.onload是指dom的生成和资源的加载,比如flash、图片完全加载出来后才执行onload。(缺点就是当某一张图片很大的时候,岂不阻止了其它js的正常执行)

知道了他们的区别后,我们再来谈谈如何避免错误和选择性使用。

如果你进行了百度,很多人会告诉你。

这样:

$('img').load(function(){
 // 加载完成 
});

好像很强大的样子,其实不然,他的缺点是每加载一张图片,回调函数就执行一次。好吧太烦了,我只想全部加载完走一次就可以了。当然可以,你可以进行修改如下:

va imgNum=$('img').length;
$('img').load(function(){
 if(!--imgNum){
 // 加载完成
 }
});

这样总可以了吧,我加载一张,就用图片总数去减一,减到0我就加载完毕。看起来很完美,前提是你没遇到IE。

IE的图片总是从缓存文件里去拿,这就造成load方法根本就不执行,只有是新图片才会走load

服了吧?继续往下看。

或者是这样:

document.getElementById('img').onload=function(){
 // 加载完成 
};

看我原生代码一统天下,实际上效果甚微,一次只能处理一个你准备写多少个document,有人说我可以用循环去绑定,经过我测试貌似根本没效果。

还是一笑而过吧。看看我的最终解决方案(兼容:谷歌&火狐&IE)

利用图片没有加载完成的时候,宽高为0。我们很容易判断图片的一个加载情况。如下:

var t_img; // 定时器
var isLoad = true; // 控制变量
// 判断图片加载状况,加载完成后回调
isImgLoad(function(){
 // 加载完成
});
// 判断图片加载的函数
function isImgLoad(callback){
 // 注意我的图片类名都是cover,因为我只需要处理cover。其它图片可以不管。
 // 查找所有封面图,迭代处理
 $('.cover').each(function(){
 // 找到为0就将isLoad设为false,并退出each
 if(this.height === 0){
 isLoad = false;
 return false;
 }
 });
 // 为true,没有发现为0的。加载完毕
 if(isLoad){
 clearTimeout(t_img); // 清除定时器
 // 回调函数
 callback();
 // 为false,因为找到了没有加载完成的图,将调用定时器递归
 }else{
 isLoad = true;
 t_img = setTimeout(function(){
 isImgLoad(callback); // 递归扫描
 },500); // 我这里设置的是500毫秒就扫描一次,可以自己调整
 }
}

看了我的代码,你是否也有了自己的想法呢?

 以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
改变javascript函数内部this指针指向的三种方法
Apr 23 Javascript
JavaScript基本编码模式小结
May 23 Javascript
点弹代码 点击页面任何位置都可以弹出页面效果代码
Sep 17 Javascript
javascript对select标签的控制(option选项/select)
Jan 31 Javascript
解析Jquery中如何把一段html代码动态写入到DIV中(实例说明)
Jul 09 Javascript
修改Jquery Dialog 位置的实现方法
Aug 26 Javascript
JS实现一次性弹窗的方法【刷新后不弹出】
Dec 26 Javascript
js实现自动轮换选项卡
Jan 13 Javascript
jQuery Ajax实现跨域请求
Jan 21 Javascript
小程序实现授权登陆的解决方案
Dec 02 Javascript
在vue中把含有html标签转为html渲染页面的实例
Oct 28 Javascript
js 解析 JSON 数据简单示例
Apr 21 Javascript
纯javaScript、jQuery实现个性化图片轮播【推荐】
Jan 08 #Javascript
js实现选项卡内容切换以及折叠和展开效果【推荐】
Jan 08 #Javascript
Javascript 实现计算器时间功能详解及实例(二)
Jan 08 #Javascript
JS 实现计算器详解及实例代码(一)
Jan 08 #Javascript
详解百度百科目录导航树小插件
Jan 08 #Javascript
Three.js基础部分学习
Jan 08 #Javascript
Javascript 高性能之递归,迭代,查表法详解及实例
Jan 08 #Javascript
You might like
3.从实例开始
2006/10/09 PHP
php设计模式 Facade(外观模式)
2011/06/26 PHP
部署PHP项目应该注意的几点事项分享
2013/12/20 PHP
php使用Imagick生成图片的方法
2015/07/31 PHP
PHP递归实现层级树状展开
2016/04/01 PHP
thinkphp在低版本Nginx 下支持PATHINFO的方法分享
2016/05/27 PHP
JavaScript学习历程和心得小结
2010/08/16 Javascript
点击A元素触发B元素的事件在IE8下会识别成A元素
2014/09/04 Javascript
js css 实现遮罩层覆盖其他页面元素附图
2014/09/22 Javascript
不同编码的页面表单数据乱码问题解决方法
2015/02/15 Javascript
javascript实现页面刷新时自动清空表单并选中的方法
2015/07/18 Javascript
javascript实现tab切换的两个实例
2015/11/05 Javascript
探讨跨域请求资源的几种方式(总结)
2016/12/02 Javascript
在点击div中的p时,如何阻止事件冒泡
2017/02/07 Javascript
原生JS实现层叠轮播图
2017/05/17 Javascript
微信小程序内拖动图片实现移动、放大、旋转的方法
2018/09/04 Javascript
小程序获取周围IBeacon设备的方法
2018/10/31 Javascript
JavaScrip数组去重操作实例小结
2019/06/20 Javascript
jquery获取input输入框中的值
2019/11/13 jQuery
介绍Python中的文档测试模块
2015/04/28 Python
为Python程序添加图形化界面的教程
2015/04/29 Python
Python计算已经过去多少个周末的方法
2015/07/25 Python
pycharm新建Vue项目的方法步骤(图文)
2020/03/04 Python
Python3如何使用tabulate打印数据
2020/09/25 Python
Cpython解释器中的GIL全局解释器锁
2020/11/09 Python
CSS3的calc()做响应模式布局的实现方法
2017/09/06 HTML / CSS
英国骑行、跑步、游泳、铁人三项运动装备专卖店:Wiggle
2016/08/23 全球购物
中东地区为妈妈们提供一切的头号购物目的地:Sprii
2018/05/06 全球购物
应届毕业生个人自荐信范文
2013/11/30 职场文书
工商企业管理实习自我鉴定
2013/12/04 职场文书
秋季运动会通讯稿
2014/01/24 职场文书
标准的毕业生自荐信
2014/04/20 职场文书
公共艺术专业自荐信
2014/09/01 职场文书
幼儿园庆元旦主持词
2015/07/06 职场文书
食堂卫生管理制度
2015/08/04 职场文书
2016年学习雷锋精神广播稿
2015/12/17 职场文书