How do I hide the container while loading an image?

Question

How do I hide the container while loading an image?

Navigation

#1 by (2 votes)

2

I'd like to know how to hide the content and show only a loading gif on the page. I managed to implement but the images keep showing up, how to solve this? My code is here:

Here is the part in javascript:

$(document).ready(function(){

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

});

And this is the name of my div:

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

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

jquery

asked by anonymous 28.09.2015 / 23:48

1 answer

How to call a fragment from an activity button Create a fixed header and footer for all pages

score 2 · Accepted Answer

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

Give a CSS class that hides everything you do not want to be seen and only shows what you want by removing that class.

You can also add a div overlay, background type, but again via CSS.

Example:

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

Example: link