CodingForums.com - View Single Post - jQuery Getting portions of javascript to fire before entire function(s) finishes

cyphix · 12-12-2012, 11:43 AM

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.

Code:

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:

Code:

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

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

Code:

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?

12-12-2012, 11:43 AM	PM User \| #1
cyphix Regular Coder Join Date: Apr 2004 Posts: 682 Thanks: 24 Thanked 1 Time in 1 Post	Getting portions of javascript to fire before entire function(s) finishes 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. Code: 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: Code: // Set temporary loading image jQuery('#main_image').attr('src', 'images/loading.jpeg'); ..and calling it before the other function like so.. Code: 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?