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 相关文章推荐
ext 代码生成器
Aug 07 Javascript
jscript读写二进制文件的方法
Apr 22 Javascript
js实现使用鼠标拖拽切换图片的方法
May 04 Javascript
PHP+mysql+Highcharts生成饼状图
May 04 Javascript
jQuery实现的产品自动360度旋转展示特效源码分享
Aug 21 Javascript
JavaScript中使用数组方法汇总
Feb 16 Javascript
JS、jQuery中select的用法详解
Apr 21 Javascript
如何判断Javascript对象是否存在的简单实例
May 18 Javascript
jQuery EasyUI Tab 选项卡问题小结
Aug 16 Javascript
JS短信验证码倒计时功能的实现(没有验证码,只有倒计时)
Oct 27 Javascript
基于Bootstrap下拉框插件bootstrap-select使用方法详解
Aug 07 Javascript
vue+element-ui JYAdmin后台管理系统模板解析
Jul 28 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 字符串替换的方法
2012/01/10 PHP
常用的php图片处理类(水印、等比缩放、固定高宽)分享
2015/06/19 PHP
php mysql获取表字段名称和字段信息的三种方法
2016/11/13 PHP
客户端 使用XML DOM加载json数据的方法
2010/09/28 Javascript
JavaScript对象和字串之间的转换实例探讨
2013/04/21 Javascript
将nodejs打包工具整合到鼠标右键的方法
2013/05/11 NodeJs
jquery事件与函数的使用介绍
2013/09/29 Javascript
js锁屏解屏通过对$.ajax进行封装实现
2014/07/31 Javascript
深入了解JavaScript中的Symbol的使用方法
2015/07/28 Javascript
Javascript 函数的四种调用模式
2016/11/05 Javascript
利用JS判断字符串是否含有数字与特殊字符的方法小结
2016/11/25 Javascript
Bootstrap的modal拖动效果
2016/12/25 Javascript
Three.js利用Detector.js插件如何实现兼容性检测详解
2017/09/26 Javascript
template.js前端模板引擎使用详解
2017/10/10 Javascript
jquery图片预览插件实现方法详解
2019/07/18 jQuery
jquery轻量级数字动画插件countUp.js使用详解
2019/10/17 jQuery
JS函数参数的传递与同名参数实例分析
2020/03/16 Javascript
使用Python下载Bing图片(代码)
2013/11/07 Python
python3中替换python2中cmp函数的实现
2019/08/20 Python
Python尾递归优化实现代码及原理详解
2020/10/09 Python
Python将QQ聊天记录生成词云的示例代码
2021/02/10 Python
html5 postMessage前端跨域并前端监听的方法示例
2018/11/01 HTML / CSS
使用postMessage让 iframe自适应高度的方法示例
2019/10/08 HTML / CSS
Notino法国:购买香水和化妆品
2019/04/15 全球购物
美国球迷装备的第一来源:FOCO
2020/07/03 全球购物
航空大学应届生求职信
2013/11/10 职场文书
如何写求职信
2014/05/24 职场文书
英语课外活动总结
2014/08/27 职场文书
法定代表人身份证明书
2014/09/10 职场文书
2015新年寄语(一句话)
2014/12/08 职场文书
《7的乘法口诀》教学反思
2016/02/18 职场文书
2016年少先队活动总结
2016/04/06 职场文书
创业计划书之少年玩具店
2019/09/05 职场文书
Python基础之字符串格式化详解
2021/04/21 Python
如何利用 CSS Overview 面板重构优化你的网站
2021/10/24 HTML / CSS
微软发布Windows 11今年最大更新22H2(附 ISO 镜像官方下载)
2022/09/23 数码科技