在頁面加載後使用jquery-ajax加載圖像

Question

我想從我的數據庫中加載100張圖像（110x110像素）。

所以第一，我叫婁代碼在我的HTML文件的末尾：

var images = ""; 
for(var i = 0; i < 100; i++){ 
    $.ajax({ 
     type: "POST", 
     url: "getImages.php", 
     data: {artist: users[i]}, 
     success: function(res) { 
      images += '<li><img src="' + res + '" /></li>'; 
     }, 
     async: false 
    }); 
} 

$("#list").append(images); // add images to my page (#list is an ul element) 

$(document).ready(function() { 
    displayWithEffect(); // shows all images 
}); 

問題是，它需要很長時間來加載100張照片（約6秒），我的Web瀏覽器不之前顯示任何東西。

所以，我改變了我的代碼先加載所有內容，然後更改img源（src）。所以我這樣做了：

var images = ""; 
for(var i = 1; i <= 100; i++){ 
    images += '<li><img src="" /></li>'; 
} 

$("#list").append(images); // add images to my page 

$(document).ready(function() { 
    var i = 0; 
    $("#list li").each(function(idx, li) { 
     var product = $(li); 
     $.ajax({ 
      type: "POST", 
      url: "getImages.php", 
      data: {artist: users[i]}, 
      success: function(ret) { 
       $(li).children(":first").attr("src", ret); 
      }, 
      async: false 
     }); 
     i++; 
    }); 
    displayWithEffect(); // shows all images 
}); 

但是我仍然得到和以前一樣的效果。

我怎樣才能完全加載和顯示除我的100張圖片之外的所有頁面內容，然後用ajax加載這些圖片（在一些loading.gif動畫後面）？

Answer 1

與$(window).on('load', function() { ...

$(window).on('load', function() { 
    var images = ""; 
    for(var i = 1; i <= 100; i++){ 
     images += '<li><img src="' + res + '" /></li>'; 
    } 

    $("#list").append(images); // add images to my page 

    $("#list li").each(function(idx, li) { 
     var product = $(li); 
     $.ajax({ 
      type: "POST", 
      url: "getImages.php", 
      data: {artist: users[idx]}, 
      success: function(ret) { 
       product.children(":first").prop("src", ret); 
      } 
     }); 
    }); 
    displayWithEffect(); // shows all images 
});