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 相关文章推荐
JS返回上一页实例代码通过图片和按钮分别实现
Aug 16 Javascript
jquery实现手机发送验证码的倒计时代码
Feb 12 Javascript
javascript实现给定半径求出圆的面积
Jun 26 Javascript
Three.js的使用及绘制基础3D图形详解
Apr 27 Javascript
Bootstrap实现基于carousel.js框架的轮播图效果
May 02 Javascript
JS简单实现自定义右键菜单实例
May 31 Javascript
Node.js 使用命令行工具检查更新
Jun 08 Javascript
实现微信小程序的wxml文件和wxss文件在webstrom的支持
Jun 12 Javascript
Vue 与 Vuex 的第一次接触遇到的坑
Aug 16 Javascript
vue项目使用axios发送请求让ajax请求头部携带cookie的方法
Sep 26 Javascript
javascript数组去重方法总结(推荐)
Mar 20 Javascript
Flutter部件内部状态管理小结之实现Vue的v-model功能
Jun 11 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后台程序与Javascript的两种交互方式
2009/10/25 PHP
PHP学习之正则表达式
2011/04/17 PHP
php实现粘贴截图并完成上传功能
2015/05/17 PHP
PHP中addslashes()和stripslashes()实现字符串转义和还原用法实例
2016/01/07 PHP
php array_merge_recursive 数组合并
2016/10/26 PHP
PHP中ltrim()函数的用法与实例讲解
2019/03/28 PHP
自动刷新网页,自动刷新当前页面,JS调用
2013/06/24 Javascript
javascript中自定义对象的属性方法分享
2013/07/12 Javascript
JS实现物体带缓冲的间歇运动效果示例
2016/12/22 Javascript
jQuery实现联动下拉列表查询框
2017/01/04 Javascript
Jquery EasyUI $.Parser
2017/06/02 jQuery
JavaScript之class继承_动力节点Java学院整理
2017/07/03 Javascript
nodeJS(express4.x)+vue(vue-cli)构建前后端分离实例(带跨域)
2017/07/05 NodeJs
angular2中使用第三方js库的实例
2018/02/26 Javascript
WEEX环境搭建与入门详解
2019/10/16 Javascript
如何使用Jquery动态生成二级选项列表
2020/02/06 jQuery
Python 分析Nginx访问日志并保存到MySQL数据库实例
2014/03/13 Python
Python实现单词拼写检查
2015/04/25 Python
Python引用模块和查找模块路径
2016/03/17 Python
基于Python代码编辑器的选用(详解)
2017/09/13 Python
matplotlib在python上绘制3D散点图实例详解
2017/12/09 Python
python实现的MySQL增删改查操作实例小结
2018/12/19 Python
python list多级排序知识点总结
2019/10/23 Python
Keras使用ImageNet上预训练的模型方式
2020/05/23 Python
Python计算矩阵的和积的实例详解
2020/09/10 Python
CSS3 实现弹幕的示例代码
2017/08/07 HTML / CSS
S’well Bottle保温杯官网:绝缘不锈钢水瓶
2018/05/09 全球购物
维多利亚的秘密官方网站:Victoria’s Secret
2018/10/24 全球购物
学期自我鉴定范文
2013/10/01 职场文书
大一学生假期实习的自我评价
2013/10/12 职场文书
致跳远运动员广播稿
2014/02/11 职场文书
护理毕业生自我鉴定
2014/02/11 职场文书
企业党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
英文自荐信范文
2015/03/25 职场文书
钓鱼岛事件感想
2015/08/11 职场文书
励志语录:只有自己足够强大,才能不被别人践踏
2020/01/09 职场文书