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 相关文章推荐
JS实现self的resend
Jul 22 Javascript
JavaScript instanceof 的使用方法示例介绍
Oct 23 Javascript
快速解决FusionCharts联动的中文乱码问题
Dec 04 Javascript
JavaScript验证图片类型(扩展名)的函数分享
May 05 Javascript
node.js中的console.info方法使用说明
Dec 09 Javascript
jQuery实现鼠标滑过链接控制图片的滑动展开与隐藏效果
Oct 28 Javascript
jQuery实现图片加载完成后改变图片大小的方法
Mar 29 Javascript
jquery点击改变class并toggle的实现代码
May 15 Javascript
微信小程序自定义prompt组件步骤详解
Jun 12 Javascript
浅析vue给不同环境配置不同打包命令
Aug 17 Javascript
Node.js HTTP服务器中的文件、图片上传的方法
Sep 23 Javascript
p5.js临摹动态图形实现方法详解
Oct 23 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
索尼SONY ICF-SW7600GR电路分析与改良
2021/03/02 无线电
基于php上传图片重命名的6种解决方法的详细介绍
2013/04/28 PHP
解析php函数method_exists()与is_callable()的区别
2013/06/21 PHP
提高PHP编程效率的方法
2013/11/07 PHP
php定时计划任务与fsockopen持续进程实例
2014/05/23 PHP
CodeIgniter中实现泛域名解析
2014/07/19 PHP
php中mail函数发送邮件失败的解决方法
2014/12/24 PHP
php检查字符串中是否有外链的方法
2015/07/29 PHP
php实现多城市切换特效
2015/08/09 PHP
tp5(thinkPHP5框架)时间查询操作实例分析
2019/05/29 PHP
Laravel 框架基于自带的用户系统实现登录注册及错误处理功能分析
2020/04/14 PHP
Extjs Ext.MessageBox.confirm 确认对话框详解
2010/04/02 Javascript
javascript级联下拉列表实例代码(自写)
2013/05/10 Javascript
分享十五款 jQuery 社交网络分享插件
2015/05/16 Javascript
微信小程序 动态的设置图片的高度和宽度详解及实例代码
2017/02/24 Javascript
Angular.JS中的指令引用template与指令当做属性详解
2017/03/30 Javascript
Vue+axios 实现http拦截及路由拦截实例
2017/04/25 Javascript
详解vue mixins和extends的巧妙用法
2017/12/20 Javascript
微信小程序页面间传递数组对象方法解析
2019/11/06 Javascript
javaScript中indexOf用法技巧
2019/11/26 Javascript
Vue中this.$nextTick的作用及用法
2020/02/04 Javascript
[04:19]DOTA2完美大师赛第四天精彩集锦
2017/11/26 DOTA
Python批量查询域名是否被注册过
2017/06/21 Python
解决PyCharm中光标变粗的问题
2017/08/05 Python
十分钟利用Python制作属于你自己的个性logo
2018/05/07 Python
使用matplotlib画散点图的方法
2018/05/25 Python
在matplotlib的图中设置中文标签的方法
2018/12/13 Python
python导入坐标点的具体操作
2019/05/10 Python
Python实战之制作天气查询软件
2019/05/14 Python
python中比较两个列表的实例方法
2019/07/04 Python
python批量处理txt文件的实例代码
2020/01/13 Python
浅谈keras.callbacks设置模型保存策略
2020/06/18 Python
Python QT组件库qtwidgets的使用
2020/11/02 Python
HTML5 canvas绘制的玫瑰花效果
2014/05/29 HTML / CSS
软件毕业生个人鉴定
2014/03/03 职场文书
公安纪律作风整顿心得体会
2016/01/23 职场文书