I am building an application in which i am doing some lengthy(10-15 seconds) of java-script execution. I want to show a gif image while this execution is on. I have added a gif loading image and before i start processing my javascript, i set the style of div containing gif image to display:block and after javascript processing is done, i set it back to display:none. I can see the gif image apprearing but it is not showing the animation. it is stuck. this gif is a loading icon.

my javascript function looks somethng like this

function jsFunc(){
// set the div containg the image to display:block
elmDivGif.style.display="block";

Here es my operation which will take 10-15 secons to finish

// setting the image style to none
elmDivGif.style.display="none";
}

Is there anything wrong in this approach. I have a feel that both gif animation and js are using the same thread to run and it is only available to one at a time.

Please advice.

I am building an application in which i am doing some lengthy(10-15 seconds) of java-script execution. I want to show a gif image while this execution is on. I have added a gif loading image and before i start processing my javascript, i set the style of div containing gif image to display:block and after javascript processing is done, i set it back to display:none. I can see the gif image apprearing but it is not showing the animation. it is stuck. this gif is a loading icon.

my javascript function looks somethng like this

function jsFunc(){
// set the div containg the image to display:block
elmDivGif.style.display="block";

Here es my operation which will take 10-15 secons to finish

// setting the image style to none
elmDivGif.style.display="none";
}

Is there anything wrong in this approach. I have a feel that both gif animation and js are using the same thread to run and it is only available to one at a time.

Please advice.

• javascript

• Can you post the animated gif? I think the issue is with the image. You can also try to download a loader from ajaxload.info – PeeHaa Commented Jul 18, 2011 at 17:26
• Have you made sure the animated .gif works when javascript isn't running? – John Stimac Commented Jul 18, 2011 at 17:27
• 2 JavaScript is single-threaded and as such it cannot both show an animation going on and execute expensive things at the same time. – pimvdb Commented Jul 18, 2011 at 17:27
• @pimvdb: I think OP uses an animated gif. Has nothing to do with JavaScript. Correct me if wrong OP. – PeeHaa Commented Jul 18, 2011 at 17:28
• 1 @Jcubed - yes, the gif works when there is no paralled JS processing. Another thing that i observed was, by putting alerts in the JS execution. Whenever, the alert is displayed waiting for my action, the gif starts animating. I think this further proves its the problem of same thread. – tamojit Commented Jul 18, 2011 at 17:40

3 Answers 3

Gif will not show the animation because the browser rendering process is actually in the same thread the javascript code is running on. In order to achieve what you're trying to do, you must use Web Workers, but keep in mind that it's not supported by all browsers yet.

If you want to run javascript and an animated gif at the same time you must have breaks in your javascript code. This can be achieved by splitting it into multiple functions and calling each function using setTimeout with a delay of about 10 milliseconds.

I was successful at displaying my gif animation during javascript processing using setTimeout to break it up and process in small enough bursts to not bog down the display, it allows other click events, etc. You didn't mention what your process is doing so I'm presuming you can break at least some of it down into sub-millisecond groups.

Between setTimeout calls, 10,000 iterations of my for loop turned out to be a sweet spot with a 10ms delay. The total time experienced as a user ends up feeling shorter since they can still interact with the page and they are more patient since they can observe an animation connoting that work is being done. This seems much more preferable than a stuck page that gets the action acplished 'as fast as possible'.

The number of iterations between setTimeout calls for your project is going to be dependent upon how long each iteration takes. Experiment with however many iterations works well for you and bear in mind that slower puters may have a different experience if you try to max out the number of iterations.

Here is the pseudo code that made my application interact more smoothly:

masterArray = populateMasterArray();
processInteractively(0, masterArray, ...);
function processInteractively(i, masterList, ...) {
    if (masterList.length > i) {
        for (var x=0; x < 10000 && masterList.length > (i+x); x++) {
            var tempI = i + x;
            //...process this tempI iteration
        }
        i += x; // Lastly update i with however many iterations were processed

        // Wait 10 milliseconds to continue processing; allowing the 
        // browser time to pose itself and display a gif animation
        setTimeout(function() {
            processInteractively(i, masterList, ...);
        }, 10); 
    else {
        outputResults(...variablesBuiltDuringExecution);
    }
}

One thing I noticed was that even though the animation may look 'stuck' if your loop counter is "too high", it is still animating according to its own timeline and will jump to the appropriate appearance whenever animation can be resumed. Therefore it may be aesthetically acceptable to have some slight (or barely imperceptible) pause in the animation which could convey that work is being done.