Question

I have a long task in Javascript that should be performed before the web page content is displayed. During the execution of this task I would like to show an image whose opacity will grow up to 100% (when the task is done).
How this can be achieved ?

Answer 1

In your function , say it’s 10 loops, every loop you need to increase the opacity, like this:

var curOpacity = 0; 
function doWork(step) {
    for(var j  = 0; j <100000000; j++) { } //simulate work
    console.log("Completed step: " + step);
    $("#element").css('opacity', step * 0.1);  
    if(step < 10)
        setTimeout(function() { doWork(step + 1); });
}
doWork(0);

You can see a working demo here

On the final step this would be setting the opacity to 1, completely faded in. The steps you just need to divide out, you need to increase opacity by 1/numOfSteps each step…a .fadeIn() won’t work here because it’ll just execute after your code is done…you need to manually set the opacity using .css() inside the loop.

The setTimeout() (without an argument it’s instant) lets the UI update before the next step starts.

Note: this works cross-browser, just use opacity and it’ll take care of setting filter: in IE for instance.