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 相关文章推荐
Script的加载方法小结
Jan 12 Javascript
jQuery EasyUI API 中文文档 - Parser 解析器
Sep 29 Javascript
jQuery 无刷新分页实例代码
Nov 12 Javascript
javascript框架设计读书笔记之模块加载系统
Dec 02 Javascript
Jquery Easyui菜单组件Menu使用详解(15)
Dec 18 Javascript
node.js中实现kindEditor图片上传功能的方法教程
Apr 26 Javascript
使用Vue.js和Flask来构建一个单页的App的示例
Mar 21 Javascript
Bootstrap模态对话框中显示动态内容的方法
Aug 10 Javascript
如何进行微信公众号开发的本地调试的方法
Jun 16 Javascript
vue使用微信JS-SDK实现分享功能
Aug 23 Javascript
vue 根据选择条件显示指定参数的例子
Nov 09 Javascript
详细分析JavaScript中的深浅拷贝
Sep 17 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
不用数据库的多用户文件自由上传投票系统(1)
2006/10/09 PHP
PHP有序表查找之插值查找算法示例
2018/02/10 PHP
PHP中命名空间的使用例子
2019/03/22 PHP
Windows服务器中PHP如何安装redis扩展
2019/09/27 PHP
javascript中自定义对象的属性方法分享
2013/07/12 Javascript
JS页面延迟执行一些方法(整理)
2013/11/11 Javascript
jQuery中mouseover事件用法实例
2014/12/26 Javascript
JavaScript学习笔记之取数组中最大值和最小值
2016/03/23 Javascript
canvas实现图像布局填充功能
2017/02/06 Javascript
angularjs的select使用及默认选中设置
2017/04/08 Javascript
javascript基本常用排序算法解析
2017/09/27 Javascript
Vue中Table组件Select的勾选和取消勾选事件详解
2019/03/19 Javascript
在微信小程序中使用图表的方法示例
2019/04/25 Javascript
详解jQuery中的prop()使用方法
2020/01/05 jQuery
JS遍历树层级关系实现原理解析
2020/08/31 Javascript
[48:24]完美世界DOTA2联赛PWL S3 Forest vs INK ICE 第一场 12.09
2020/12/12 DOTA
跟老齐学Python之关于类的初步认识
2014/10/11 Python
Python map和reduce函数用法示例
2015/02/26 Python
python PyTorch参数初始化和Finetune
2018/02/11 Python
pandas 把数据写入txt文件每行固定写入一定数量的值方法
2018/12/28 Python
python批量下载抖音视频
2019/06/17 Python
pyqt5 实现多窗口跳转的方法
2019/06/19 Python
Django 创建新App及其常用命令的实现方法
2019/08/04 Python
解决Python3下map函数的显示问题
2019/12/04 Python
Python计算公交发车时间的完整代码
2020/02/12 Python
Python自带的IDE在哪里
2020/07/01 Python
Python如何测试stdout输出
2020/08/10 Python
Matplotlib中rcParams使用方法
2021/01/05 Python
matplotlib交互式数据光标mpldatacursor的实现
2021/02/03 Python
浅析HTML5 meta viewport参数
2020/10/28 HTML / CSS
外贸业务员岗位职责
2013/11/24 职场文书
2015年政务公开工作总结
2015/05/19 职场文书
庆祝教师节新闻稿
2015/07/17 职场文书
启迪人心的励志语录:脾气永远不要大于本事
2020/01/02 职场文书
JavaScript 去重和重复次数统计
2021/03/31 Javascript
教你nginx跳转配置的四种方式
2022/07/07 Servers