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 相关文章推荐
firefo xml 读写实现js代码
Jun 11 Javascript
将数字转换成大写的人民币表达式的js函数
Sep 21 Javascript
JavaScript代码实现图片循环滚动效果
Mar 19 Javascript
Javascript日期格式化format函数的使用方法
Aug 30 Javascript
多个上传文件用js验证文件的格式和大小的方法(推荐)
Mar 09 Javascript
详解Angular 开发环境搭建
Jun 22 Javascript
解读ES6中class关键字
Nov 20 Javascript
Vue自定义弹窗指令的实现代码
Aug 13 Javascript
laydate如何根据开始时间或者结束时间限制范围
Nov 15 Javascript
webpack4.x下babel的安装、配置及使用详解
Mar 07 Javascript
jQuery实现带进度条的轮播图
Sep 13 jQuery
js闭包的9个使用场景
Dec 29 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
php UTF-8、Unicode和BOM问题
2010/05/18 PHP
PHP获取当前日期所在星期(月份)的开始日期与结束日期(实现代码)
2013/06/18 PHP
[原创]php获取数组中键值最大数组项的索引值
2015/03/17 PHP
php使用crypt()函数进行加密
2017/06/08 PHP
Laravel学习教程之View模块详解
2017/09/18 PHP
jQuery(非HTML5)可编辑表格实现代码
2012/12/11 Javascript
jQuery实现返回顶部功能适合不支持js的浏览器
2014/08/19 Javascript
jQuery实现数字加减效果汇总
2014/12/16 Javascript
JS实现的ajax和同源策略(实例讲解)
2017/12/01 Javascript
Vue中CSS动画原理的实现
2019/02/13 Javascript
微信小程序 搜索框组件代码实例
2019/09/06 Javascript
微信小程序开发打开另一个小程序的实现方法
2020/05/17 Javascript
vue 全局封装loading加载教程(全局监听)
2020/11/05 Javascript
[04:39]显微镜下的DOTA2第十三期—Pis卡尔个人秀
2014/04/04 DOTA
[04:19]DOTA2完美大师赛第四天精彩集锦
2017/11/26 DOTA
使用python画社交网络图实例代码
2019/07/10 Python
使用Python的Turtle绘制哆啦A梦实例
2019/11/21 Python
linux环境下安装python虚拟环境及注意事项
2020/01/07 Python
快速解决Django关闭Debug模式无法加载media图片与static静态文件
2020/04/07 Python
详解CSS3选择器的使用方法汇总
2015/11/24 HTML / CSS
加拿大著名时装品牌:SOIA & KYO
2016/08/23 全球购物
巴西电子产品购物网站:Saldão da Informática
2018/01/09 全球购物
北美最大的手工艺品零售商之一:Michaels Stores
2019/02/27 全球购物
音乐学院硕士生的自我评价分享
2013/11/01 职场文书
思想专业自荐信范文
2013/12/25 职场文书
心得体会怎么写
2013/12/30 职场文书
简历自我评价模版
2014/01/31 职场文书
演讲稿的格式及范文
2014/08/22 职场文书
夫妻双方自愿离婚协议书怎么写
2014/12/01 职场文书
写给老婆的保证书
2015/02/27 职场文书
2015年乡镇卫生院工作总结
2015/04/22 职场文书
2016学校元旦晚会经典开场白台词
2015/12/03 职场文书
新课程改革心得体会
2016/01/22 职场文书
三年级作文之趣事作文
2019/11/04 职场文书
python - asyncio异步编程
2021/04/06 Python
go开发alertmanger实现钉钉报警
2021/07/16 Golang