jQuery 判断图片是否加载完成方法汇总


Posted in Javascript onAugust 10, 2015

对于图片的处理,例如幻灯片播放、缩放等,都是依赖于在所有图片完成之后再进行操作。

今天来看下如何判断所有的图片加载完成,而在加载完成之前可以使用 loading 的 gif 图表示正在加载中。

一、普通方法

监听 img 的 load 方法,每 load 一张图片比较一次。关键代码如下:

var num = $img.length;

$imgs.load(function() {
  num--;
  if (num > 0) {
    return;
  }
  console.log('load compeleted');
}

二、使用 jQuery 中的 Deferred 对象

Deferred 对象是从 jQuery 1.5.0 版本开始引入的一个新功能,详细介绍可以见 官方文档。

简单的说,Deferred 对象就是jQuery的回调函数解决方案,它解决了如何处理耗时操作的问题, 对那些操作提供了更好的控制,以及统一的编程接口。

阮一峰有一篇文章是介绍 Deferred 对象的,写的比较详细,对于入门比较有用。

jQuery的deferred对象详解

在这里,我们用到了:

deferred.resolve(): Resolve a Deferred object and call any doneCallbacks with the given args.
deferred.when(): Provides a way to execute callback functions based on one or more objects, usually Deferred objects that represent asynchronous events.
deferred.done(): Add handlers to be called when the Deferred object is resolved.

关键代码:

var defereds = [];

$imgs.each(function() {
  var dfd = $.Deferred();

  $(this).load(dfd.resolve);
  defereds.push(dfd);
});
$.when.apply(null, defereds).done(function() {
  console.log('load compeleted');
});

基本思路:

每加载完一张图片 resolve(),when() 当所有的 Deferred 完成便执行 done()。

注: 因为 $.when 支持的参数是 $.when(dfd1, dfd2, dfd3, ...),所以我们这里使用了 apply 来接受数组参数。

complete判断图片是否加载了

感谢谷歌,找到了好使的方法,简单用法就是:

qim=new Image();//新建一个图片;
qim.src=$preload;//图片地址是你准备要加载的地址;
if(qim.complete){ $("#cxNfloor").html($filetoload);//qim.complete表示这个图片是否加载完毕了
}

后来又发现一个方法

$("").load(function(){...});

其中选择器是图片的id或class,function里面的方法就是回调函数,在图片加载完成后执行,但是我试验了很多,压根儿不是那么回事,正确的解决方法是:

//jquery的方式
$("#imageId").load(function(){
  alert("加载完成!");
});

有朋友说使用js是最好的,方法如下

document.getElementById("img2").onload=function(){}

在网上找到一段代码
例子

function loadImage(url, callback) {
 var img = new Image(); //创建一个Image对象,实现图片的预下载
 img.src = url;
 
 if(img.complete) { // 如果图片已经存在于浏览器缓存,直接调用回调函数
   callback.call(img);
   return; // 直接返回,不用再处理onload事件
  }
 img.onload = function () { //图片下载完毕时异步调用callback函数。
    callback.call(img);//将回调函数的this替换为Image对象
  };
};

下面是针对多个image的加载判断。

var imgdefereds=[];
$('img').each(function(){
 var dfd=$.Deferred();
 $(this).bind('load',function(){
 dfd.resolve();
 }).bind('error',function(){
 //图片加载错误,加入错误处理
 // dfd.resolve();
 })
 if(this.complete) setTimeout(function(){
 dfd.resolve();
 },1000);
 imgdefereds.push(dfd);
})
$.when.apply(null,imgdefereds).done(function(){
  callback();
});

  使用这种方法就可以避免window.onload的不足,不过代码稍显复杂 在性能方面比起window.onload经强很多。

Javascript 相关文章推荐
jquery插件 cluetip 关键词注释
Jan 12 Javascript
HTML Color Picker(js拾色器效果)
Aug 27 Javascript
简单的Jquery遮罩层代码实例
Nov 14 Javascript
JS替换字符串中空格方法
Apr 17 Javascript
每天一篇javascript学习小结(Function对象)
Nov 16 Javascript
js随机生成一个验证码
Jun 01 Javascript
JQuery EasyUI 结合ztrIee的后台页面开发实例
Sep 01 jQuery
Vue-cli Eslint在vscode里代码自动格式化的方法
Feb 23 Javascript
vscode中vue-cli项目es-lint的配置方法
Jul 30 Javascript
vue-property-decorator用法详解
Dec 12 Javascript
Vue项目页面跳转时浏览器窗口上方显示进度条功能
Mar 26 Javascript
koa2 数据api中间件设计模型的实现方法
Jul 13 Javascript
javascript实现连续赋值
Aug 10 #Javascript
jQuery+css3实现Ajax点击后动态删除功能的方法
Aug 10 #Javascript
js中的内部属性与delete操作符介绍
Aug 10 #Javascript
jquery中的工具使用方法$.isFunction, $.isArray(), $.isWindow()
Aug 09 #Javascript
javascript中对变量类型的判断方法
Aug 09 #Javascript
jquery仿百度百科底部浮动导航特效
Aug 08 #Javascript
jquery实现页面虚拟键盘特效
Aug 08 #Javascript
You might like
php可应用于面包屑导航的递归寻找家谱树实现方法
2015/02/02 PHP
Yii框架安装简明教程
2020/05/15 PHP
超级24小时弹窗代码 24小时退出弹窗代码 100%弹窗代码(IE only)
2010/06/11 Javascript
jQuery实现购物车多物品数量的加减+总价计算
2014/06/06 Javascript
Javascript获取CSS伪元素属性的实现代码
2014/09/28 Javascript
基于jquery的手风琴图片展示效果实现方法
2014/12/16 Javascript
Vue.js快速入门教程
2016/09/07 Javascript
Javascript动画效果(2)
2016/10/11 Javascript
Javascript动画效果(3)
2016/10/11 Javascript
Vue添加请求拦截器及vue-resource 拦截器使用
2017/11/23 Javascript
在Vue methods中调用filters里的过滤器实例
2018/08/30 Javascript
Vue点击切换颜色的方法
2018/09/13 Javascript
vue.js实现数据库的JSON数据输出渲染到html页面功能示例
2019/08/03 Javascript
Node.js控制台彩色输出的方法与原理实例详解
2019/12/01 Javascript
javascript浅层克隆、深度克隆对比及实例解析
2020/02/09 Javascript
JS通用方法触发点击事件代码实例
2020/02/17 Javascript
Python 命令行参数sys.argv
2008/09/06 Python
python 解决动态的定义变量名,并给其赋值的方法(大数据处理)
2018/11/10 Python
python实现任意位置文件分割的实例
2018/12/14 Python
python实现音乐播放器 python实现花框音乐盒子
2020/02/25 Python
keras 权重保存和权重载入方式
2020/05/21 Python
Python中and和or如何使用
2020/05/28 Python
Keras loss函数剖析
2020/07/06 Python
python3中calendar返回某一时间点实例讲解
2020/11/18 Python
日本非常有名的内衣丝袜品牌:GUNZE
2017/01/06 全球购物
StubHub澳大利亚:购买或出售您的门票
2019/08/01 全球购物
设计4个线程,其中两个线程每次对j增加1,另外两个线程对j每次减少1。写出程序。
2014/12/30 面试题
工商管理专业实习生自我鉴定
2013/09/29 职场文书
质量工程师岗位职责
2013/11/16 职场文书
出纳员岗位责任制
2014/02/11 职场文书
安全生产责任书范本
2014/04/15 职场文书
大学军训自我鉴定大全
2014/09/18 职场文书
幼儿园园长个人总结
2015/03/02 职场文书
幼儿园托班开学寄语(2016春季)
2015/12/03 职场文书
创业计划书之废品回收
2019/09/26 职场文书
Python数据可视化之绘制柱状图和条形图
2021/05/25 Python