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 相关文章推荐
iframe 自适应高度[在IE6 IE7 FF下测试通过]
Apr 13 Javascript
Js 获取HTML DOM节点元素的方法小结
Apr 24 Javascript
ASP.NET中使用后端代码注册脚本 生成JQUERY-EASYUI的界面错位的解决方法
Jun 12 Javascript
JavaScript 参数中的数组展开 [译]
Sep 21 Javascript
关于图片的预加载过程中隐藏未知的
Dec 19 Javascript
js中switch case循环实例代码
Dec 30 Javascript
如何获取网站icon有哪些可行的方法
Jun 05 Javascript
解决html input验证只能输入数字,不能输入其他的问题
Jul 21 Javascript
浅谈 vue 中的 watcher
Dec 04 Javascript
微信小程序实现收藏与取消收藏切换图片功能
Aug 03 Javascript
从零开始搭建vue移动端项目到上线的步骤
Oct 15 Javascript
浅谈Vue.js 关于页面加载完成后执行一个方法的问题
Apr 01 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 flv视频时间获取函数
2010/06/29 PHP
PHP imagecreatefrombmp 从BMP文件或URL新建一图像
2012/07/16 PHP
PHP函数in_array()使用详解
2014/08/20 PHP
php实现的Curl封装类Curl.class.php用法实例分析
2015/09/25 PHP
yii2.0使用Plupload实现带缩放功能的多图上传
2015/12/22 PHP
PHP基本语法实例总结
2016/09/09 PHP
Laravel+Intervention实现上传图片功能示例
2019/07/09 PHP
用XMLDOM和ADODB.Stream实现base64编码解码实现代码
2010/11/28 Javascript
javascript中IE浏览器不支持NEW DATE()带参数的解决方法
2012/03/01 Javascript
JS中的substring和substr函数的区别说明
2013/05/07 Javascript
javascript 实现键盘上下左右功能的小例子
2013/09/15 Javascript
JavaScript中的undefined学习总结
2013/11/30 Javascript
iframe里使用JavaScript控制主页转向的方法
2015/04/03 Javascript
JS实现把鼠标放到链接上出现滚动文字的方法
2016/04/06 Javascript
JS脚本实现动态给标签控件添加事件的方法
2016/06/02 Javascript
jQuery Ajax 上传文件处理方式介绍(推荐)
2016/06/30 Javascript
JS实现获取来自百度,Google,soso,sogou关键词的方法
2016/12/21 Javascript
深入理解 JavaScript 中的 JSON
2017/04/06 Javascript
jQuery.Form实现Ajax上传文件同时设置headers的方法
2017/06/26 jQuery
JavaScript中创建原子的方法总结
2018/08/26 Javascript
Vue项目pdf(base64)转图片遇到的问题及解决方法
2018/10/19 Javascript
[01:19:11]Ti4 循环赛第二日 NaVi.us vs iG
2014/07/11 DOTA
[06:15]2016国际邀请赛中国区预选赛单车采访:我顶WINGS
2016/06/27 DOTA
分析Python编程时利用wxPython来支持多线程的方法
2015/04/07 Python
HTML5录音实践总结(Preact)
2020/05/07 HTML / CSS
Everlast官网:拳击、综合格斗和健身相关的体育用品
2020/08/03 全球购物
大唐电信科技股份有限公司java工程师面试经历
2016/12/09 面试题
社区七一党员活动方案
2014/01/25 职场文书
师范学院教师自荐书
2014/01/31 职场文书
揭牌仪式主持词
2014/03/19 职场文书
职工代表大会主持词
2014/04/01 职场文书
工会换届选举方案
2014/05/21 职场文书
志愿者宣传口号
2014/06/17 职场文书
我的中国梦演讲稿小学篇
2014/08/19 职场文书
2014年房地产销售工作总结
2014/12/01 职场文书
Django项目如何获得SSL证书与配置HTTPS
2021/04/30 Python