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之二(两种扩展)
Jun 11 Javascript
jquery $.each 和for怎么跳出循环终止本次循环
Sep 27 Javascript
JavaScript如何从listbox里同时删除多个项目
Oct 12 Javascript
js创建对象的方法汇总
Jan 07 Javascript
JavaScript闭包和范围实例详解
Dec 19 Javascript
bootstrap table 表格中增加下拉菜单末行出现滚动条的快速解决方法
Jan 05 Javascript
bootstrap weebox 支持ajax的模态弹出框
Feb 23 Javascript
angularJs中跳转到指定的锚点实例($anchorScroll)
Aug 31 Javascript
Vue.js 十五分钟入门图文教程
Sep 12 Javascript
vue拖拽组件使用方法详解
Dec 01 Javascript
vue 父组件给子组件传值子组件给父组件传值的实例代码
Apr 15 Javascript
Element MessageBox弹框的具体使用
Jul 27 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密码生成类实例
2014/09/24 PHP
php运行报错Call to undefined function curl_init()的最新解决方法
2016/11/20 PHP
Laravel 5.5 的自定义验证对象/类示例代码详解
2017/08/29 PHP
微信支付之JSAPI公众号支付详解
2019/05/15 PHP
js 图片轮播(5张图片)
2008/12/30 Javascript
js去除重复字符串两种实现方法
2013/01/09 Javascript
JS 获取HTML标签内的子节点的方法
2016/09/21 Javascript
基于Node.js + WebSocket打造即时聊天程序嗨聊
2016/11/29 Javascript
详解使用Visual Studio Code对Node.js进行断点调试
2017/09/14 Javascript
webpack 如何解析代码模块路径的实现
2019/09/04 Javascript
解决layui数据表格table的横向滚动条显示问题
2019/09/04 Javascript
JS实现可视化音频效果的实例代码
2020/01/16 Javascript
[16:27]DOTA2 HEROS教学视频教你分分钟做大人-艾欧
2014/06/11 DOTA
[00:20]TI9不朽观赛名额抽取
2019/08/05 DOTA
python输入错误密码用户锁定实现方法
2017/11/27 Python
在Python中Dataframe通过print输出多行时显示省略号的实例
2018/12/22 Python
Python values()与itervalues()的用法详解
2019/11/27 Python
英国最大的电子产品和家电零售企业:Currys PC World
2016/09/24 全球购物
美国著名珠宝品牌之一:Jared The Galleria Of Jewelry
2016/10/01 全球购物
世界上最大的乐器零售商:Guitar Center
2017/11/07 全球购物
美国领先的家庭健康检测试剂盒提供商:LetsGetChecked
2019/03/18 全球购物
竞聘副主任科员演讲稿
2014/01/11 职场文书
办理生育手续介绍信
2014/01/14 职场文书
挂科检讨书范文
2014/02/20 职场文书
观看《永远的雷锋》心得体会
2014/03/12 职场文书
食堂采购员岗位职责
2014/03/17 职场文书
家长给学校的建议书
2014/05/15 职场文书
大学优秀班集体申报材料
2014/05/23 职场文书
工地标语大全
2014/06/18 职场文书
创先争优演讲稿
2014/09/15 职场文书
公司捐书倡议书
2015/04/27 职场文书
大学毕业晚会开场白
2015/05/29 职场文书
背起爸爸上学观后感
2015/06/08 职场文书
担保公司2015年终工作总结
2015/10/14 职场文书
Python3中最常用的5种线程锁实例总结
2021/07/07 Python
GoFrame gredis缓存DoVar Conn连接对象 自动序列化GoFrame gredisDo/DoVar方法Conn连接对象自动序列化/反序列化总结
2022/06/14 Golang