Я хочу загрузить 100 изображений (110x110 px) из моей базы данных.
Итак, во-первых, я назвал следующий код в конце моего 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 изображений, а затем загрузить эти изображения (за некоторой анимацией loading.gif
) с помощью ajax?
Замените $(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
});
$(window).on('load'
...
res
в третьей строке второго кода?