How can I hide a page contents until all the images are fully loaded?

Question

I am trying to optimize a site which loads terribly. I already reordered, compressed and minified js and css, but the biggest problem are the images. This site has some real

Answer 1

It's extremely easy with JQuery. I'd recommend using that framework anyway, even if it wasn't for this particular solution:

function preload(arrayOfImages) {
    $(arrayOfImages).each(function(){
        $('')[0].src = this;
    });
}

Use it like this:

preload([
    'img/apple.jpg',
    'img/banana.jpg',
    'img/pear.jpg'
]);

Hiding your site at this point is easy with CSS and JQuery:

CSS:

body {
    display:none;
}

JQuery:

$(function(){
    $('body').show();
    // or fade it in: $('body').fadeIn();
});