最简单的判断逻辑是使用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,简单就是美,能简单的解决,就不要钻牛角尖了。
