最近,图片分享的兴起,关于图片的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,简单就是美,能简单的解决,就不要钻牛角尖了。
分享到:
相关推荐
$.Deferred 是 PromisesA 的一个实现。 异步代码通常难以阅读和测试,因为它通常是使用嵌套匿名函数实现的,其中混合了分支逻辑以进行良好的衡量......回调地狱。 虽然 Deferred 并没有消除对回调的需要,但它们...
在jQuery1.5+,提供了$.Deferred(其可以被转化为promise对象)。很多知名的框架中,也提供了promise对象。promise对象在javascript中已经是一种很重要的模式,它在解决异步问题时表现出的优雅,正是javascript所...
$.ajax({ success: function() { $.ajax({ success: function() { $.ajax({ //callbacks... }); }); }); 这种方式代码可读性差,效率低,晦涩难懂,调试和排错的复杂度大。 2).并行调用Ajax var promises = ...
当jQuery中埋藏了一个“足够好”的实现时,为什么还要加载一个单独的Promises poly-fill? 该包装器导出一个内部使用$ .Deferred的新构造函数。 不同之处在于,该参数与本机Promises使用的回调类型相同,而不是$ ....
jquery Deferred 快速解决异步回调的问题 function ok(name){ var dfd = new $.Deferred();...1类:$.when(pro1,pro1) 将多个 promise 对象以and的关系 合并为1个 2类:promise 激发为 解决 deferr
这是接口的独立实现。 我想在不希望包含整个大型jQuery库但使用例如zepto的项目中使用出色的Deferred接口。 这个项目试图尽可能地模仿$ .Defered,但是如果有差异,我也不会感到惊讶。 兼容性 需要Array.prototype...
$.blur,.mousedown,.change,.mouseenter,.click,.mouseleave,.dblclick,.mousemove,.error,.mouseout,.focus,.mouseover,.focusin,.mouseup,.focusout,.resize,.keydown,.scroll,.keypress,.select,.keyup,.submit,....
最近大量的用到jQuery Callbacks 对象,jQuery库中的$.ajax()和$.Deferred() 对象也是基于这个对象实现,下面我们也模拟实现jQuery Callbacks 对象的部分功能
适用于Node.js的jQuery Deferreds jQuery Deferreds使用最小的... $.Deferred Deferred $._Deferred Deferred._Deferred $.when Deferred.when $.Callbacks Deferred.Callbacks _Deferred仅在1.7.0之前可用 Ca
此代码仿照jquery源码中$.when()的实现 代码如下:function test(i) { var dfd = $.Deferred(); if(i%2 == 0) { console.log(“resolve ” + i); dfd.resolve(); } else { console.log(“failure ” + i); ...
主要介绍了jQuery中Deferred的deferred.promise()方法,提醒千万要注意deferred.promise()与jQuery的.promise() 实例方法的区别,需要的朋友可以参考下
延期要求使用此模块需要您使用--harmony_proxies和--... 当你需要一个带有deferredRequire的模块时,在你需要的模块第一次被使用之前,不会实际加载或评估任何代码。 这是通过和谐代理的魔力实现的。 警告:由于
deferred对象是jQuery对Promises接口的实现。接下来通过本文给大家详解介绍jQuery中的deferred对象的使用(一),需要的朋友一起学习吧
基于gulp构建的 jQuery Bootstrap PC端WEB项目
默认: $.Deferred() 可接受的值:任何有效的jQuery.Deferred对象 功能:一旦调用print函数就解析的jQuery.Deferred对象。可用于设置回调 - 请参阅wiki 超时 默认: 750 可接受的值:以毫秒为单位的时间 setTimeout ...
deferred: $.Deferred() }; // Merge with user-options options = $.extend({}, defaults, (options || {})); var $styles = $(""); if (options.globalStyles) { // Apply the stlyes from the current ...
component.request.handler.deferred
常见用例包括: 允许 Iron Router 路由等待一个或多个异步任务基于异步任务完成在模板中执行条件渲染使用Tracker.autorun在 promise 完成Tracker.autorun接执行当前版本v0.9.1用法对象与传统的回调模型非常相似,但...