通过$.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的加载判断。 
   

Js代码  

1. $(img).bind('load',function(){  
2.     callback();  
3. }).bind('error',function(){  
4.    //图片加载错误，加入错误处理  
5.     //callback();  
6. })  
7. if(img.complete) setTimeout(function(){  
8.     callback();  
9. },1000);  
10.        

      那如果我要针对多张图片都加载完后才触发操作该怎么办呢？这时可以使用jquery中的$.Deferred和$.when来操作。关于jquery的Deferred介绍可以参看如下网址： http://www.cnblogs.com/sanshi/archive/2011/03/10/1980195.html 。 
      下面是针对多个image的加载判断。 

Js代码  

1. var imgdefereds=[];  
2. $('img').each(function(){  
3.     var dfd=$.Deferred();  
4.     $(this).bind('load',function(){  
5.         dfd.resolve();  
6.     }).bind('error',function(){  
7.     //图片加载错误，加入错误处理  
8.     //  dfd.resolve();  
9.     })  
10.     if(this.complete) setTimeout(function(){  
11.         dfd.resolve();  
12.     },1000);  
13.     imgdefereds.push(dfd);  
14. })  
15. $.when.apply(null,imgdefereds).done(function(){  
16.     callback();  
17. });  

      使用这种方法就可以避免window.onload的不足，不过代码稍显复杂，不如window.onload简单易懂，如果你不在乎那么一丢丢的性能，没有异步生成的img标签。不妨使用window.onload，简单就是美，能简单的解决，就不要钻牛角尖了。