0

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 :(

3
  • 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, 2014 at 21:14
  • I made a FIDDLE HERE I dont see any problems though
    – CodeGodie
    Oct 28, 2014 at 21:20
  • 1
    @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, 2014 at 21:47

1 Answer 1

2

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.