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 really heavy images in it, so when it starts to load the content jumps while all the images are being loaded.

I cant manually set the height of the divs containing the images because they are user submitted, and although the width is a fixed value, height isn’t.

I understand that this is probably not a good practice, but I think its better that the page takes two seconds before showing contents, that it being jumpy and unusable for those two seconds.

1.) Is this technically possible? How? (I would like to know this, even if its not a good practice)

2.) If this is not a good practice, how would you avoid this problem?

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(){
        $('<img/>')[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();
});