在1頁上有多個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小提琴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插件包裝在延遲中以使其更通用的地方。