How to show image before executing javascript?

Show a javascript loader image while function is executing

• I want to click a button, show a loader image, execute a time-consuming function, hide the loader image. When I attempt this, the page freezes until the entire event runs, so the loader image is never seen. Here is a sample: $('#btn').click(function() { $('#LoadingImage').show(); <time consuming function> $('#LoadingImage').hide(); }); How can I distinctly show the loader image, update the screen, run the function, hide the loader image?

• Answer:

  Although what you have should work, try doing this: $('#btn').click(function() { $('#LoadingImage').show(); setTimeout(function() { <time consuming function> $('#LoadingImage').hide(); }, 0); }); This will http://blog.thinkature.com/index.php/2006/11/26/escaping-the-javascript-call-stack-with-settimeout/. If THAT doesn't work, then post more details as to what this mystery time consuming function is.