通过$.Deferred 实现判断N个图片加载完毕逻辑

阅读更多

     最近，图片分享的兴起，关于图片的JS效果也多了起来，比如自动缩放、自动排版等，对于这一类效果很多都依赖于图片的完全加载后才能执行，所以，这是就需要通过js判断N个图片是否加载完毕了。
     最简单的判断逻辑是使用window.onload事件，和jquery等库提供的domready事件不同，这个事件保证了所有网页内容都加载完后才触发，包括图片，而domready事件不能保证图片已经加载，由此保证了脚本正常执行。
     不过这个方法也不是十全十美的，首先在效率上不是最优的，不过这不是最主要的问题，还能接受。最大的问题是如果img是通过ajax请求或其他异步手段生成，window.onload事件就不会触发，还有其他方案吗？
     有，那就是直接用image的onload和complete参数判断。网上有不少介绍。可以参看： http://blog.sina.com.cn/s/blog_73c8ed1901013k70.html
     下面是针对一个image的加载判断。
   

$(img).bind('load',function(){
	callback();
}).bind('error',function(){
   //图片加载错误，加入错误处理
	//callback();
})
if(img.complete) setTimeout(function(){
	callback();
},1000);
     

      那如果我要针对多张图片都加载完后才触发操作该怎么办呢？这时可以使用jquery中的$.Deferred和$.when来操作。关于jquery的Deferred介绍可以参看如下网址： http://www.cnblogs.com/sanshi/archive/2011/03/10/1980195.html。
      下面是针对多个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简单易懂，如果你不在乎那么一丢丢的性能，没有异步生成的img标签。不妨使用window.onload，简单就是美，能简单的解决，就不要钻牛角尖了。