javascript - 在一页上进行多个 imageLoaded 调用，并确保每个调用都已完成，然后再继续

Question

我的页面上有 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/

Answer 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            
    });

});

http://jsfiddle.net/dkzrv/4/

$.when() 函数是一个实用程序，它将多个延迟封装成一个。因为它返回自己的延迟对象，所以您可以调用 .done() 和 fail() 并将其视为任何其他延迟对象。

供将来引用，.then() 通常用于控制串行任务，$.when() 用于控制并行任务。

在 loadImages() 函数中，您可以将 loadImages 插件包装在 deferred 中，以使其更加通用。