Smoothly preload largeish background images

Question

I have a site which uses largeish (60-100k) background images which vary from page to page.

When the user loads the page for the fist time, the page content is loaded first and the background image appears a short time after. This is, I understand, intended behavior in browsers but it makes the page loading look quite "bumpy" on slower connections.

I had thought of hiding the page with a loading "mask" which gets removed by JS when the background image has loaded...but this is still quite an ugly approach.

How could I make it so the page content and the background image appear to the user at the same time?

Answer 1

A better way would probably be to use jquery and fade the background image in once it has loaded. Also you could try preloading the next image before the user clicks the next page to make it even smoother.

If you delay the content from showing until the image has shown it's just going to irritate your users. They are (probably) there primarially for the information so don't ever touch anything that delays that process.

The exception for this is some arty farty website where people who don't know about websites come on to click on things and they don't care about anything apart from it looking pretty.

Answer 2

The best solution here would be to try and find a way to get that image smaller. There are some good compression tools out there. I recommend looking at ImageMagick, some JPEG-specific tools (http://jpegclub.org/) or PNG-specific tools (http://www.aboutonlinetips.com/optimize-and-compress-png-files/).

But to do what you're specifically asking - hide everything on the page until it's ready and then have it load in - you could use jQuery and do something like this:

$(function(){
    var bgimage = new Image();      
    bgimage.src="{your giant image's URL goes here}";       

    $(bgimage).load(function(){
        $("body").css("background-image","url("+$(this).attr("src")+")").fadeIn();                  
    });
});

What this does is it waits until all the elements are loaded on the page and then creates a new Image object. We point the source to your larger image file. When that is finished loading, we change the background to use this newly loaded image, which should load instantly because the browser cached it.

I have fadeIn() there in case you want to hide all of the content on the page until it's ready. This means you should make the hidden.

For some reason fadeIn() works better than show() or simply removing a "hidden" class via removeClass(), if you take that approach. With the latter two approaches the tag seems to resize its height to fit the content of the page which can result in not displaying the background image in its entirety.

Honestly though, I don't really recommend this approach :p

At least, not if you're going to hide all the content on the page until it's ready.

This might be a good approach for displaying the background image only when it's ready, avoiding the partially loaded image being displayed...

A slower load is just the tradeoff for using large images.

Answer 3

You could use data URIs to mitigate this issue in modern browsers and fall back to your current technique for IE 6/7.