CODEWITHSUNDEEP
javascriptjqueryimageload
Ed Harrison
Ed Harrison

Reputation: 53

Images aren't loading in desired order

I have assigned a div id to my images with the intention of loading them in a specific order. However, he image I am trying to load first (pocket2.png) isn't. Any ideas why? The website is here http://edharrisondesign.com/pocketpictograms/.

Thanks in advance!

        jQuery(document).ready(function($) {

        $(".preload").each(loadImages);

            function loadImages (i, elem) {

                var numItems = $('.preload').length;
                for (var i = 0; i < numItems; i++) {

                    $("#img" + i).each(function(){
                        var thisSource = $(this).data('src');
                        $(this).html('<img src="' + thisSource + '" alt=""/>');
                    });
                }

        } //<end loadImages function>

    });

Upvotes: 0

Views: 48

Answers (1)

Daniel Imms
Daniel Imms

Reputation: 50149

The images are all loading asynchronously which means they come in whichever order they finished first, most likely the smallest images first. I wouldn't really worry about the order in which they're loading, it will make little difference on a decent connection.

If you really wanted to optimise your image loading you should have a single giant image containing all images and split it up using CSS or javascript. This means there would only be a single request to the server instead of numItems requests.

Upvotes: 1

Related Questions