通过$.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，简单就是美，能简单的解决，就不要钻牛角尖了。