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