我的页面上有 3 个部分,其中包含许多不同尺寸的图像,我需要做的是确保这 3 个部分图像中的每一个都已完全加载,然后再继续应用任何过渡等,例如淡入淡出等部分.
我想我知道我需要做什么,但我不确定执行它。我需要创建一个延迟对象,在完成解析延迟对象时监视每个调用,然后运行 deferred.when 或 deferred.done 方法,听起来像吗这可能是对的吗?正如我所说,我只是不确定该怎么做?
我正在使用 imagesLoaded 插件,我的代码当前如下所示:
JS
$(function () {
var def1 = $.Deferred();
var def2 = $.Deferred();
var def3 = $.Deferred();
var def = $.when(def1, def2, def3);
$('.set1').imagesLoaded(function () {
console.log('Set 1 ready');
def1.resolve();
});
$('.set2').imagesLoaded(function () {
console.log('Set 2 ready');
def2.resolve();
});
$('.set3').imagesLoaded(function () {
console.log('Set 3 ready');
def3.resolve();
});
def.done(function () {
console.log('ready');
});
});
JS Fiddle http://jsfiddle.net/dkzrv/1/
最佳答案
$(function () {
function loadImages(selector) {
var dfd = $.Deferred();
/*
...do work to load images...
if success, dfd.resolve()/dfd.resolveWith(...)
if failure, dfd.reject()/dfd.rejectWith(...)
to indicate progress, dfd.notify()/dfd.notifyWith(...)
*/
$(selector).imagesLoaded(function () {
var setResult = "dummy data";
dfd.resolve(setResult);
});
/*
If you return the dfd directly,
it can be canceled via .reject() from the outside.
To allow outside canceling just return the dfd.
*/
return dfd.promise();
}
//Run multiple deferreds in parallel and wait for all to complete with $.when
$.when(loadImages('.set1'), loadImages('.set2'), loadImages('.set3'))
.done(function(set1Result, set2Result, set3Result) {
//All resolved
})
.fail(function() {
//One or more failed
//If you want to know which one,
//you have to save a reference to each of
//the loadImages calls and determine through
//their individual .failure()'s
});
});
$.when()
函数是一个实用程序,它将多个延迟封装成一个。因为它返回自己的延迟对象,所以您可以调用 .done()
和 fail()
并将其视为任何其他延迟对象。
供将来引用,.then()
通常用于控制串行任务,$.when()
用于控制并行任务。
在 loadImages()
函数中,您可以将 loadImages
插件包装在 deferred 中,以使其更加通用。
关于javascript - 在一页上进行多个 imageLoaded 调用,并确保每个调用都已完成,然后再继续,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18322672/