For Loop Image Gallery

Question

I am trying to create an image gallery from a JSON feed. Here is the code I am using below:

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 +"'>");
    };

At present the page is not outputting the images one by one -> it is loading them all together. Which in turn is causing a very long page loading time. Is there a way I can get the image to load one by one so the page load time is minimal.

Thanks in advance!

EDIT

I have just implemented this:

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

And that seems to be working perfectly in getting the images to load one by one -> but the page load time is still the same :(

Try using a library like LazyLoad. If not, just add the elemnts to the dom, and after page load load the image sources. Problem is browser cna only handle at most 6 calls at the same time, so more than 6 images are requested in several batches — juvian, Oct 28 '14 at 21:14
I made a **[FIDDLE HERE](http://jsfiddle.net/84mmcgn2/1/)** I dont see any problems though — CodeGodie, Oct 28 '14 at 21:20
@CodeGodie once you load an image, it's cached. There should be 0 loading the next time you display it (like in your fiddle, you repeat the same 2 images). — Rodney G, Oct 28 '14 at 21:47

score 2 · Accepted Answer · answered Oct 28 '14 at 21:32

If you don't want to introduce an arbitrary amount of delay into your application, you can load the next immediately after the previous one loads:

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

For Loop Image Gallery

1 Answers1