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张图片（大约6s）需要很长时间，而我的网页浏览器在此之前没有显示任何内容。

因此，我更改了代码以先加载所有内容，然后更改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() { ...替换为$(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
});

加载页面后使用jquery-ajax加载图像

1 个答案: