Question

I have a .click() function that performs certain actions when a button is clicked. I want it to display a loading image, run some “stuff”, then delete the loading image when the “stuff” is done.

Example of Javascript code:

$("#button").click(
function(){
    shoeLoadingImage();
    /**************************************************************************
    *
    * other actions to be performed after showLoadingImage() is finished
    *
    **************************************************************************/
    //Whats below should only to be triggered after above actions above are finished
    hideLoadingImage();
}
 );

By using a couple of suggestions here I came up with a solution. It works, but I’m sure there is a better way to do this since my loading.gif is frozen when it is loaded. FYI: the other actions listed under success: function(){} contains some actions that take some time to complete which is the whole purpose of this loading image.

$("#highlight").click(
function(){
    $.ajax({
        beforeSend: function(){ showLoadingImage(); },
        success: function(){
           /**************************************************************************
    *
    * other actions to be performed after showLoadingImage() is finished
    *
    **************************************************************************/

        },
        complete: function (){ hideLoadingImage(); }
    });
});

Answer 1

If there is no ajax call involved your code looks good. Otherwise if showLoadingImage is an ajax call you should do

$("#button").click(
function(){
    showLoadingImage();

);

var showLoadingImage = function(){
    $.ajax({
         success: function(){
         /**************************************************************************
         *
         * other actions to be performed after showLoadingImage() is finished
         *
         **************************************************************************/
         hideLoadingImage(); //only to be triggered after above actions are finished
    })
}