jQuery Getting portions of javascript to fire before entire function(s) finishes

[cyphix]

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?

[AndrewGSW]

jQuery (and JS) do not wait for the function to complete before executing statements.

A couple of ways of doing this this are outlined here.

You might also consider pre-caching the big image(s). That is, creating new Image()'s and setting their src to the big images as, or just after, the page has loaded.

[cyphix]

Perhaps I didn't use the correct wording, but as I understand it nothing is returned to "the screen" until it is done.

Have considered loading the images when the page does, but I chose to avoid this as the user may not even want to look at all the images (can be up to 12) and thus be an overhead we do not need.

Thanks for the link though - I'll check it out!