페이지로드 후 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 개 이미지를로드하는 데 시간이 너무 오래 걸려서, 그리고 내 웹 브라우저는하지 않습니다 그 전에 아무것도 표시하십시오.

그래서 코드를 변경하여 모든 내용을 먼저로드 한 다음 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 애니메이션 뒤에)를로드하는 방법은 무엇입니까?

Answer 1

$(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 
});