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下判断是否为闰年的Datetime包
Oct 26 Javascript
写给想学习Javascript的朋友一点学习经验小结
Nov 23 Javascript
Javascript 遍历页面text控件详解
Jan 06 Javascript
href下载文件根据id取url并下载
May 28 Javascript
微信小程序中实现一对多发消息详解及实例代码
Feb 14 Javascript
JavaScript简单拖拽效果(1)
May 17 Javascript
微信小程序图片轮播组件gallery slider使用方法详解
Jan 31 Javascript
webpack 模块热替换原理
Apr 09 Javascript
纯js封装的ajax功能函数与用法示例
May 14 Javascript
JS/jQuery实现简单的开关灯效果【案例】
Feb 19 jQuery
layui原生表单验证的实例
Sep 09 Javascript
JS实现鼠标移动拖尾
Dec 27 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延迟静态绑定示例分享
2014/06/22 PHP
PHP人民币金额转大写实例代码
2015/10/02 PHP
Windows平台实现PHP连接SQL Server2008的方法
2017/07/26 PHP
PHP接入微信H5支付的方法示例
2019/10/28 PHP
细说javascript函数从函数的构成开始
2013/08/29 Javascript
JavaScript小技巧整理篇(非常全)
2016/01/26 Javascript
Vue 2.0+Vue-router构建一个简单的单页应用(附源码)
2017/03/14 Javascript
基于Vue开发数字输入框组件
2017/12/19 Javascript
js提取中文拼音首字母的封装工具类
2018/03/12 Javascript
AngularJS自定义过滤器用法经典实例总结
2018/05/17 Javascript
微信小程序使用template标签实现五星评分功能
2018/11/03 Javascript
Vue props 单向数据流的实现
2018/11/06 Javascript
spring+angular实现导出excel的实现代码
2019/02/27 Javascript
vue 使用axios 数据请求第三方插件的使用教程详解
2019/07/05 Javascript
js简单实现自动生成表格功能示例
2020/06/02 Javascript
解决vuecli3中img src 的引入问题
2020/08/04 Javascript
nodejs使用Sequelize框架操作数据库的实现
2020/10/21 NodeJs
解决antd datepicker 获取时间默认少8个小时的问题
2020/10/29 Javascript
Python实现使用卷积提取图片轮廓功能示例
2018/05/12 Python
Python检查ping终端的方法
2019/01/26 Python
Python数据库小程序源代码
2019/09/15 Python
python 视频逐帧保存为图片的完整实例
2019/12/10 Python
python爬取抖音视频的实例分析
2021/01/19 Python
HTML5新增的Css选择器、伪类介绍
2013/08/07 HTML / CSS
Reformation官网:美国女装品牌
2018/09/14 全球购物
10条PHP编程习惯
2014/05/26 面试题
英语演讲稿3分钟
2014/04/29 职场文书
公司门卫岗位职责
2015/04/13 职场文书
接待员岗位职责范本
2015/04/15 职场文书
2015年依法行政工作总结
2015/04/29 职场文书
教师读书笔记
2015/06/29 职场文书
呼啸山庄读书笔记
2015/06/29 职场文书
军训通讯稿范文
2015/07/18 职场文书
2016年党员承诺书范文
2016/03/24 职场文书
Python趣味爬虫之用Python实现智慧校园一键评教
2021/05/28 Python
剖析后OpLog订阅MongoDB的数据变更就没那么难了
2022/02/24 MongoDB