Display page when all background images are loaded

Question

I want the page and contents in it to be displayed ONLY AFTER my big background images are loaded.I've tried so many ways to do it, I just can't find a way. Already tried $(document).ready - not working.

body
{
 padding: 0;
 margin: 0;
 background-color: #ffffff;
 width: 100%;
 overflow-x: hidden;
 background: url('images/dark.jpg');
 background-attachment: fixed;
 background-size: cover;
}

possible duplicate? http://stackoverflow.com/questions/5681062/jquery-wait-till-background-images-have-loaded-then-show-element — OliverRadini, Nov 13 '15 at 12:10
So many duplicate for this question - http://stackoverflow.com/questions/22788782/wait-for-background-images-in-css-to-be-fully-loaded — Jinu Kurian, Nov 13 '15 at 13:59

score 1 · Accepted Answer · answered Nov 13 '15 at 13:23

1

You could show an overlay with loading animation

<div id="preloader"></div>

#preloader 
{ 
    position: fixed; 
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 9999;
    background: #FFFFFF url('URL TO AN ANIMATED LOADING GIF') no-repeat center center; 
}

and set it to display: none after all content is loaded

window.onload = function() {
    document.querySelector('#preloader').style.display = "none";
};

answered Nov 13 '15 at 13:23

El Devoper

1,073
8
20

Thanks a lot, worked! What would be JS code without gif loader, just blank screen and the same - display image and page after done? – Martinez Nov 13 '15 at 13:49
You'r welcome. JS would be the same, just change "background: #FFFFFF url('URL TO AN ANIMATED LOADING GIF') no-repeat center center;" to "background-color: #FFFFFF" in CSS. – El Devoper Nov 13 '15 at 15:51
Thanks a bunch again ! – Martinez Nov 15 '15 at 23:25

score 0 · Answer 2 · answered Nov 13 '15 at 12:10

0

You can use setTimeout function to display the data after you backgrounds.

Thanks

answered Nov 13 '15 at 12:10

Shaban Khan

156
9

Ele · Answer 3 · 2015-11-13T12:35:28.230

0

Try this:

You must do this for every images. For example:

$('selector_images').each(function(idx, img) {
    var img = $(img).attr('src', '/big_image.jpg')
.on('load', function() {
        if (!this.complete) {
            console.log('broken image!');
        } else {
            //Show content
        }
    });
});

Hope this helps!

edited Nov 13 '15 at 12:35

answered Nov 13 '15 at 12:19

Ele

33,468
7
37
75

Display page when all background images are loaded

3 Answers3