如何處理多個異步請求？

Question

我有兩個請求，一個是加載圖像（後端服務器會花費很多時間），另一個是ajax。 我要像以下：

$.when(
    [do image load] 
    [do ajax] 
).then(
    alert('all complete') 
) 

然而，$。當和然後使用多個Ajax請求，如何處理與Ajax和圖像加載

Answer 1

$.when(
    $.get("/ajax/", function(response) { 
    //process ajax 
    }), 
    $.get("/assets/image.png", function(image) { 
    // process image 
    }), 
).then(function() { 
    // All is ready now, so... 
    alert('all complete') 
}); 

Answer 2

我想建議Gauri的imgLoad插件從jQuery callback on image load (even when the image is cached)

/** 
* Trigger a callback when 'this' image is loaded: 
* @param {Function} callback 
*/ 
(function($){ 
    $.fn.imgLoad = function(callback) { 
     return this.each(function() { 
      if (callback) { 
       if (this.complete || /*for IE 10-*/ $(this).height() > 0) { 
        callback.apply(this); 
       } 
       else { 
        $(this).on('load', function(){ 
         callback.apply(this); 
        }); 
       } 
      } 
     }); 
    }; 
})(jQuery); 

用法，

$('#img-if').imgLoad(function(){ 
    // inside the image complete callback 
    $.ajax({ 
     .... 
     success:function(response){ 
      // final code to be executed here 
     } 
    }) 
});