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和DOM Interfaces来处理HTML
Oct 09 Javascript
jquery简单体验
Jan 10 Javascript
JS实现模仿微博发布效果实例代码
Dec 16 Javascript
js实现创建删除html元素小结
Sep 30 Javascript
浅谈AngularJs指令之scope属性详解
Oct 24 Javascript
jquery 标签 隔若干行加空白或者加虚线的方法
Dec 07 Javascript
jQuery中table数据的值拷贝和拆分
Mar 19 Javascript
JS实现自动轮播图效果(自适应屏幕宽度+手机触屏滑动)
Jun 19 Javascript
解决vue+element 键盘回车事件导致页面刷新的问题
Aug 25 Javascript
基于webpack4.X从零搭建React脚手架的方法步骤
Dec 23 Javascript
PostgreSQL Node.js实现函数计算方法示例
Feb 12 Javascript
jQuery 淡入/淡出效果函数用法分析
May 19 jQuery
纯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下用GD生成生成缩略图的两个选择和区别
2007/04/17 PHP
MayFish PHP的MVC架构的开发框架
2009/08/13 PHP
PHP支持多种格式图片上传(支持jpg、png、gif)
2011/11/03 PHP
PHP的引用详解
2015/02/22 PHP
适合PHP初学者阅读的4本经典书籍
2016/09/23 PHP
PHP获取路径和目录的方法总结【必看篇】
2017/03/04 PHP
PHP基于PDO扩展操作mysql数据库示例
2018/12/24 PHP
php使用自带dom扩展进行元素匹配的原理解析
2020/05/29 PHP
jquery tools之tabs 选项卡/页签
2009/07/25 Javascript
jquery调用asp.net 页面后台的实现代码
2011/04/27 Javascript
解决Extjs上传图片无法预览的解决方法
2012/03/22 Javascript
jquery导航制件jquery鼠标经过变色效果示例
2013/12/05 Javascript
如何让你的Lightbox支持滚轮缩放及Base64图片
2014/12/04 Javascript
avalon js实现仿微博拖动图片排序
2015/08/14 Javascript
js仿腾讯QQ的web登陆界面
2016/08/19 Javascript
json定义及jquery操作json的方法
2016/09/29 Javascript
微信小程序顶部可滚动导航效果
2017/10/31 Javascript
JS实现简单的抽奖转盘效果示例
2019/02/16 Javascript
微信小程序文章详情页跳转案例详解
2019/07/09 Javascript
js实现烟花特效
2020/03/02 Javascript
python网络编程学习笔记(二):socket建立网络客户端
2014/06/09 Python
python判断windows系统是32位还是64位的方法
2015/05/11 Python
Python3的urllib.parse常用函数小结(urlencode,quote,quote_plus,unquote,unquote_plus等)
2016/09/18 Python
python中实现k-means聚类算法详解
2017/11/11 Python
对pandas的行列名更改与数据选择详解
2018/11/12 Python
OpenCV 模板匹配
2019/07/10 Python
python实现淘宝购物系统
2019/10/25 Python
Win下PyInstaller 安装和使用教程
2019/12/25 Python
python DataFrame转dict字典过程详解
2019/12/26 Python
详解background属性的8个属性值(面试题)
2020/11/02 HTML / CSS
Canvas引入跨域的图片导致toDataURL()报错的问题的解决
2018/09/19 HTML / CSS
开业典礼主持词
2014/03/21 职场文书
日化店促销方案
2014/03/26 职场文书
2014村书记党建工作汇报材料
2014/11/02 职场文书
乐山大佛导游词
2015/02/02 职场文书
Java基于字符界面的简易收银台
2021/06/26 Java/Android