Для галереи изображений Loop

Question

Я пытаюсь создать галерею изображений из канала JSON. Вот код, я использую ниже:

for (var i = 0; i < json.images.length; i++){ 
     var image_thumbnail_url = json.images[i].image_thumbnail_url; 
     var image_alt_text = json.images[i].image_alt_text; 
     var image_category = json.images[i].image_category; 
     var image_url = json.images[i].image_url; 
     var dealer_company_name = json.images[i].dealer[0].dealer_company_name; 
     var dealer_email_address = json.images[i].dealer[0].dealer_email_address; 
     var dealer_website_url = json.images[i].dealer[0].dealer_website_url; 
     var dealer_phone_number = json.images[i].dealer[0].dealer_phone_number; 
     $("#main").append("<img class='thumbnail' src='" + image_thumbnail_url + "' alt='"+ image_alt_text +"' data-image-category='"+ image_category +"' data-image-url='"+ image_url +"' data-dealer-name='"+ dealer_company_name +"' data-dealer-email-address='"+ dealer_email_address +"' data-dealer-website='"+ dealer_website_url +"' data-dealer-phone-number='"+ dealer_phone_number +"'>"); 
    }; 

В настоящее время страница не выводит изображения по одному -> она загружается их все вместе. Это, в свою очередь, вызывает очень длительное время загрузки страницы. Есть ли способ, которым я могу загрузить изображение по одному, чтобы время загрузки страницы было минимальным.

Заранее благодарен!

EDIT

Я только реализовать это:

for (var i = 0; i < json.images.length; i++){ 
     appendImage(json.images[i].image_thumbnail_url, json.images[i].image_alt_text, json.images[i].image_category, json.images[i].image_url, json.images[i].dealer[0].dealer_company_name, json.images[i].dealer[0].dealer_email_address, json.images[i].dealer[0].dealer_website_url, json.images[i].dealer[0].dealer_phone_number) 
    }; 

    function appendImage(image_thumbnail_url, image_alt_text, image_category, image_url, dealer_company_name, dealer_email_address, dealer_website_url, dealer_phone_number) { 
     setTimeout(function() { 
      $("#gui_sub").append("<img class='gui_thumbnail' src='" + image_thumbnail_url + "' alt='"+ image_alt_text +"' data-image-category='"+ image_category +"' data-image-url='"+ image_url +"' data-dealer-name='"+ dealer_company_name +"' data-dealer-email-address='"+ dealer_email_address +"' data-dealer-website='"+ dealer_website_url +"' data-dealer-phone-number='"+ dealer_phone_number +"'>"); 
     },300 * i); 
    } 

И это, кажется, прекрасно работает в получении изображения, чтобы загрузить один на один -> но время загрузки страницы по-прежнему то же :(

Answer 1

Если вы не хотите вводить произвольное количество задержек в ваше приложение, вы можете загрузить следующее сразу после загрузки предыдущего:

(function loadNextImage(i) { 
    if (json && json.images && json.images[i]) { 
     var img = new Image(), 
      image = json.images[i]; 
     img.onload = function() { 
      $("<img/>", { 
       src: image.image_thumbnail_url, // will be cached 
       alt: image.image_alt_text, 
       'data-image-category': image.image_category, 
       'data-dealer-name': image.dealer[0].dealer_company_name, 
       'data-dealer-email-address': image.dealer[0].dealer_email_address, 
       'data-dealer-website': image.dealer[0].dealer_website_url, 
       'data-dealer-phone-number': image.dealer[0].dealer_phone_number 
      }).appendTo("#main"); 
      loadNextImage(++i); 
     }; 
     img.src = image.image_thumbnail_url; 
    } 
})(0);