jQuery判断图⽚是否加载完成⽅法汇总
对于图⽚的处理，例如幻灯⽚播放、缩放等，都是依赖于在所有图⽚完成之后再进⾏操作。
今天来看下如何判断所有的图⽚加载完成，⽽在加载完成之前可以使⽤ loading 的 gif 图表⽰正在加载中。
⼀、普通⽅法
监听 img 的 load ⽅法，每 load ⼀张图⽚⽐较⼀次。关键代码如下：
var num = $img.length;
$imgs.load(function() {
num--;
if (num > 0) {
return;
}
jquery在线图片console.log('load compeleted');
}
⼆、使⽤ jQuery 中的 Deferred 对象
Deferred 对象是从 jQuery 1.5.0 版本开始引⼊的⼀个新功能，详细介绍可以见官⽅⽂档。
简单的说，Deferred 对象就是jQuery的回调函数解决⽅案，它解决了如何处理耗时操作的问题，对那些操作提供了更好的控制，以及统⼀的编程接⼝。
阮⼀峰有⼀篇⽂章是介绍 Deferred 对象的，写的⽐较详细，对于⼊门⽐较有⽤。
jQuery的deferred对象详解
在这⾥，我们⽤到了：
关键代码：
var defereds = [];
$imgs.each(function() {
var dfd = $.Deferred();
$(this).solve);
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(qimplete){ $("#cxNfloor").html($filetoload);//qimplete表⽰这个图⽚是否加载完毕了
}
后来⼜发现⼀个⽅法
$("").load(function(){...});
其中选择器是图⽚的id或class，function⾥⾯的⽅法就是回调函数，在图⽚加载完成后执⾏，但是我试验了很多，压根⼉不是那么回事，正确的解决⽅法是：
//jquery的⽅式
$("#imageId").load(function(){
alert("加载完成！");
});
有朋友说使⽤js是最好的，⽅法如下
复制代码代码如下:
在⽹上到⼀段代码
例⼦
function loadImage(url, callback) {
var img = new Image(); //创建⼀个Image对象，实现图⽚的预下载
img.src = url;
if(imgplete) { // 如果图⽚已经存在于浏览器缓存，直接调⽤回调函数
callback.call(img);
return; // 直接返回，不⽤再处理onload事件
}
callback.call(img);//将回调函数的this替换为Image对象
};
};
下⾯是针对多个image的加载判断。
var imgdefereds=[];
$('img').each(function(){
var dfd=$.Deferred();
$(this).bind('load',function(){
}).bind('error',function(){
//图⽚加载错误，加⼊错误处理
// solve();
})
if(thisplete) setTimeout(function(){
},1000);
imgdefereds.push(dfd);
})
$.when.apply(null,imgdefereds).done(function(){
callback();
});
使⽤这种⽅法就可以避免load的不⾜，不过代码稍显复杂在性能⽅⾯⽐起load经强很多。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。