Question

I am changing a image via jQuery, but the image takes a few seconds to load and hence appears like the click did nothing, so I needed to input a temporary “loading” image to show the user that the image is loading.

However as I have experienced in the past JS doesn’t really fire things as things happen, it waits until the full function is done before things happen; I recall coming up with a solution in the past but I just can’t remember what it was.

I have this which does each task, but the user never sees the loading image because it is replaced by the new image before the user even sees anything.

function changeMainImage(image) {

    // Set temporary loading image
    jQuery('#main_image').attr('src', 'images/loading.jpeg');    

    // Set big image
    var big_image = image + '-big.png'

    // Update main image url
    jQuery('#main_image').attr('src', big_image);

}

I have tried putting the below into a separate function:

// Set temporary loading image
jQuery('#main_image').attr('src', 'images/loading.jpeg');

..and calling it before the other function like so..

onclick="setLoadingIMage(); changeMainImage('images/ai');"

but that didn’t change anything.

Could anyone tell me what I need to do to achieve the effect I want?

Answer 1

This will display the loading.jpeg until the image has been loaded.

function changeMainImage(image) {

    jQuery('#main_image').attr('src', 'images/loading.jpeg');

    var img = new Image();
    img.src = image + "-big.png";

    img.onload = function( ) {
          jQuery('#main_image').attr('src', img.src );
    }
}

If the image is held in cache then img.onload will fire immediately.

Demo here