最近,图片分享的兴起,关于图片的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 并没有消除对回调的需要,但它们...
这段代码通过遍历`$.ajax()`和`$.Deferred()`的所有方法,将只存在于`$.Deferred()`中的方法(如`resolveWith`, `resolve`, `rejectWith`, `reject`)列出来。这些方法在`$.ajax()`返回的`Promise`对象中是不可用的...
以加载图片为例,我们可以创建一个`loadImg`函数,该函数内部使用$.Deferred来封装异步的图片加载过程: ```javascript var loadImg = function(url) { var img = new Image(), deferred = $.Deferred(); img.src...
创建一个deferred对象很简单,只需要通过$.Deferred()函数即可。例如: ```javascript var deferred = $.Deferred(); ``` 这个deferred对象可以被用来控制异步操作的状态,包括pending(等待中)、resolved(已解决...
当jQuery中埋藏了一个“足够好”的实现时,为什么还要加载一个单独的Promises poly-fill? 该包装器导出一个内部使用$ .Deferred的新构造函数。 不同之处在于,该参数与本机Promises使用的回调类型相同,而不是$ ....
这是接口的独立实现。 我想在不希望包含整个大型jQuery库但使用例如zepto的项目中使用出色的Deferred接口。 这个项目试图尽可能地模仿$ .Defered,但是如果有差异,我也不会感到惊讶。 兼容性 需要Array.prototype...
总结来说,本文介绍了如何在JavaScript和jQuery中利用Ajax和$.Deferred()对象实现同步操作,特别针对一个实例——在上传多张图片并获取图片ID后,再进行数据写入的操作。通过理解$.Deferred()对象和$.when()函数的...
在jQuery中,可以使用$.Deferred对象来实现更复杂的异步逻辑处理。$.Deferred对象提供了一种用于注册回调函数来处理异步操作成功或失败的方法。它可以用来封装异步操作,使其可以返回一个Promise对象,这样就可以在...
6. **遍历与过滤(Traversing & Filtering)**:$.fn.next()、$.fn.prev()遍历元素,$.fn.first()、$.fn.last()选择首个或最后一个,$.fn.filter()和$.fn.not()进行过滤。 7. **属性操作(Attribute Handling)**:...
6. **工厂模式**:jQuery.Deferred实现了一个工厂模式,每次调用$.Deferred()都会产生一个新的Deferred实例。 #### 四、实际应用示例 ```javascript function runAsync(){ var def = $.Deferred(); setTimeout...
`$.when()`函数是一个非常有用的工具,它可以等待多个`deferred`对象并行执行,并在它们全部成功或失败时调用相应的回调。这在处理多个异步请求时非常有用,比如: ```javascript $.when($.ajax('test.json'), $....
例如,在一个典型的jQuery异步操作中,你可能创建一个`$.Deferred()`对象,然后执行一系列操作,如Ajax请求。当这些操作完成后,你可以调用`deferred.resolve()`或`deferred.reject()`来改变状态。然后,你可以通过`...
`$.deferred()`则可以创建一个延迟对象,用于构建复杂的异步逻辑。 最后,对于那些需要定期从服务器获取新数据的场景,可以使用`setInterval()`结合jQuery的异步方法来实现定时刷新。但需要注意,过于频繁的请求...
$.blur,.mousedown,.change,.mouseenter,.click,.mouseleave,.dblclick,.mousemove,.error,.mouseout,.focus,.mouseover,.focusin,.mouseup,.focusout,.resize,.keydown,.scroll,.keypress,.select,.keyup,.submit,....
通常,`$.ajax()`请求默认是并行执行的,但通过`async: false`可以设置为同步,但这会导致浏览器阻塞。更好的方法是使用`$.when()`和`$.Deferred()`来创建和管理请求队列: ```javascript function makeRequest(url...
`$.when()`允许我们等待一个或多个异步操作完成,而`$.Deferred()`则提供了创建和控制异步操作的机制。在需要等待某些特定条件满足后再执行后续代码时,这两个方法非常有用。例如: ```javascript var deferred = $...
首先,`$.Deferred()` 创建一个 Deferred 对象,它具有解决(resolve)和拒绝(reject)两种状态。当异步操作成功时,我们调用 `deferred.resolve(value)` 来改变其状态,而当操作失败时,我们会使用 `deferred....
1. **$.Deferred()**:创建一个新的deferred对象。 2. **deferred.done()**:当deferred对象的状态变为“已完成”时,调用指定的回调函数。 3. **deferred.fail()**:当deferred对象的状态变为“已失败”时,调用...