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

时间:2014-01-23 18:20:49

标签: javascript jquery

我想从我的数据库中加载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动画后面)?

1 个答案:

答案 0 :(得分: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
});