我的页面上有 3 个部分,其中包含许多不同大小的图像,我需要做的是确保这 3 个部分的图像中的每一个都已完全加载,然后再继续应用任何过渡等,例如淡化这些部分等。
我想我知道我需要做什么,但我不确定执行它。我需要创建一个延迟对象,在完成解析延迟对象时监控这些调用中的每一个,然后运行deferred.when
ordeferred.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 小提琴 http://jsfiddle.net/dkzrv/1/