How do I hide the container while uploading an image?

Question

I would like to know how to hide the content and show only a gif of loading on the page. I was able to implement but the images keep appearing, how to solve this? My code is here:

Here is the javascript part:

$(document).ready(function(){

    //Esconde preloader
    $(window).load(function(){
        $('#preload').fadeOut(1500);
    });

});

And that’s my div’s name:

<div id="preload"><img src="algumacoisa.gif"></div>

Someone could help me because this only does not hide the content of the page until it loads.

Answer 1

This effect you describe is called flash of unstyled content (FOUC), and the only way to avoid it is to have the default mode (ie by default) with CSS rules.

Gives a CSS class that hides everything you don’t want to be seen and shows only what you want by removing this class.

You can also add a div overlay, like a backdrop, but again via CSS.

Example:

$(document).ready(function () {
    //Esconde preloader
    $(window).load(function () {.ready()
        $("#preload").animate({
            opacity: 0
        }, 1000, function () {
            this.remove();
        });
    });
});

Example: http://jsfiddle.net/e0tttcfr/