I am having a bit of an issue with image loading in JavaScript. I want a series of images to load sequentially i.e. image 2 only starts loading when image 1 has pletely finished loading.

The problem I am finding is that the JavaScript onLoad method does not fire when the image has pleted loading, but when the image starts loading. Therefore the smallest image is always going to be the first to load regardless of where in the queue it is. I have put together a simple example of what i mean in JS fiddle (HTML and JS code is below as well).

Any ideas how I can wait until the image has pletely loaded before starting to load the next one - it can't be that hard surely?

Note : I originally wrote it using the jQuery .load function and got the same result which is why I was messing about in raw JS.

HTML code:

<ul>
    <li><img src="" alt="image 1" width="210" height="174"></li>
    <li><img src="" alt="image 2" width="210" height="174"></li>
    <li><img src="" alt="image 3" width="210" height="174"></li>
    <li><img src="" alt="image 4" width="210" height="174"></li>
    <li><img src="" alt="image 5" width="210" height="174"></li>
</ul>

<a href="#" id="loader">Load the images</a>

JS code:

        var imgArr = [
        ".jpg",
        ".jpg",
        ".jpg",
        ".jpg",
        ".jpg"
    ],
    totalImgs = imgArr.length,
    count = 0;

    function onLoaded(count) {
        console.log("fired onload "+count);
        var currentImg = $('li:eq('+count+') img');
        currentImg.attr('src', imgArr[count]).css('display','block');
        count++;
        if (count < totalImgs) {
            loadImg(count);
        };
    }

    function loadImg(count) {
        imgObj = new Image()
        imgObj.src = imgArr[count];
        imgObj.onLoad = onLoaded(count);                        
    }

    $('#loader').click(function() {
        loadImg(count);
    });

I am having a bit of an issue with image loading in JavaScript. I want a series of images to load sequentially i.e. image 2 only starts loading when image 1 has pletely finished loading.

The problem I am finding is that the JavaScript onLoad method does not fire when the image has pleted loading, but when the image starts loading. Therefore the smallest image is always going to be the first to load regardless of where in the queue it is. I have put together a simple example of what i mean in JS fiddle (HTML and JS code is below as well).

Any ideas how I can wait until the image has pletely loaded before starting to load the next one - it can't be that hard surely?

Note : I originally wrote it using the jQuery .load function and got the same result which is why I was messing about in raw JS.

HTML code:

<ul>
    <li><img src="" alt="image 1" width="210" height="174"></li>
    <li><img src="" alt="image 2" width="210" height="174"></li>
    <li><img src="" alt="image 3" width="210" height="174"></li>
    <li><img src="" alt="image 4" width="210" height="174"></li>
    <li><img src="" alt="image 5" width="210" height="174"></li>
</ul>

<a href="#" id="loader">Load the images</a>

JS code:

        var imgArr = [
        "http://media.topshop./wcsstore/ConsumerDirectStorefrontAssetStore/images/colors/color7/cms/pages/static/static-0000038166/images/zine-HP-UK.jpg",
        "http://media.topshop./wcsstore/ConsumerDirectStorefrontAssetStore/images/colors/color7/cms/pages/static/static-0000038166/images/Valentine_UK.jpg",
        "http://media.topshop./wcsstore/ConsumerDirectStorefrontAssetStore/images/colors/color7/cms/pages/static/static-0000038166/images/crop_UK__.jpg",
        "http://media.topshop./wcsstore/ConsumerDirectStorefrontAssetStore/images/colors/color7/cms/pages/static/static-0000038166/images/hitlist_UK--.jpg",
        "http://media.topshop./wcsstore/ConsumerDirectStorefrontAssetStore/images/colors/color7/cms/pages/static/static-0000038166/images/chinese_new_year_UK_new_0402.jpg"
    ],
    totalImgs = imgArr.length,
    count = 0;

    function onLoaded(count) {
        console.log("fired onload "+count);
        var currentImg = $('li:eq('+count+') img');
        currentImg.attr('src', imgArr[count]).css('display','block');
        count++;
        if (count < totalImgs) {
            loadImg(count);
        };
    }

    function loadImg(count) {
        imgObj = new Image()
        imgObj.src = imgArr[count];
        imgObj.onLoad = onLoaded(count);                        
    }

    $('#loader').click(function() {
        loadImg(count);
    });

• javascript
• jquery
• onload

Share Improve this question Follow edited Dec 11, 2020 at 16:22 BenMorel 36.7k5252 gold badges206206 silver badges337337 bronze badges asked Feb 6, 2013 at 17:12 El GuapoEl Guapo 59722 gold badges1414 silver badges2828 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

The problem here is that not the handler function is assigned to the onload event of the Image but the return value of onLoaded. You'd need to say imgObj.onload = onLoaded; For the currentImg you can use this as the handler will be invoked on the Image object. For passing other parameters, an alternative way is needed.

Am sure you moved on from this error seeing it was asked over 2yrs ago; nonetheless I think for the benefit of others I will point out what I believe is your mistake.

You're using imgObj.onLoad instead of imgObj.onload. Javascript is case-sensitive and there is no native "onLoad" event.

The rest of the code should work well when you fix this.