頁面加載后使用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秒），而我的網絡瀏覽器在此之前未顯示任何內容。

因此，我更改了代碼以首先加載所有內容，然后更改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

將$(document).ready(function() { ...替換$(document).ready(function() { ... $(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
});