最近,图片分享的兴起,关于图片的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的加载判断。
那如果我要针对多张图片都加载完后才触发操作该怎么办呢?这时可以使用jquery中的$.Deferred和$.when来操作。关于jquery的Deferred介绍可以参看如下网址: http://www.cnblogs.com/sanshi/archive/2011/03/10/1980195.html 。
下面是针对多个image的加载判断。
使用这种方法就可以避免window.onload的不足,不过代码稍显复杂,不如window.onload简单易懂,如果你不在乎那么一丢丢的性能,没有异步生成的img标签。不妨使用window.onload,简单就是美,能简单的解决,就不要钻牛角尖了。
最简单的判断逻辑是使用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,简单就是美,能简单的解决,就不要钻牛角尖了。