jquery - preload image with javascript and display when ready

Question

I want to show a low-res image and start loading the hi-res image after the complete page has rendered. Only when the hi-res image is completely loaded, I want to replace the low-res image by the hi-res image.

I know I should use

$(window).load(function(){
});

But what do I do to actually start loading a certain image? And how do I know when the image is loaded?

(I know about the existence of lazyload, but this image has to be the background of an element, so I have to use .css("background-image", var) and can't use lazyload I guess.)

Answer 1

Use this script to preload the images:

<div class="hidden">
    <script type="text/javascript">
        <!--//--><![CDATA[//><!--
            var images = new Array()
            function preload() {
                for (i = 0; i < preload.arguments.length; i++) {
                    images[i] = new Image()
                    images[i].src = preload.arguments[i]
                }
            }
            preload(
                "images-1.png",
                "images-2.png",
                "images-3.png",
                "images-4.png"
            )
        //--><!]]>
    </script>
</div>

Then use low-res images in your html as you need and change to hi-res images when needed. The preloaded image is there for you.

$(window).load(function(){
   $(selector).css('background-image',images[0]);
});