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.

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

Answer: 
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";
};

```
**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!**