Question

I have a page of thumbnails which change their opacity with a hover with a image swap script built in jquery. However When I run it on a live website it is slow and you have to wait for the second image to load so the hover swap doesn’t happen right away. How would I preload all of the thumb images while the page loads? the site is live here

Here is the html

<div class="span-16 last" id="thumbs">
        <div class="span-4">
            <a href="waterfront.php"><img src="images/thumbs/thumb1.gif" id="thumb1"></a>
        </div>

    </div><!--THUMBS ENDS-->

Here is the jquery

$("#thumb1").hover(
        function(){
            $("#thumb1").attr("src","images/thumbs/thumb1A.gif");
            },

        function(){
            $("#thumb1").attr("src","images/thumbs/thumb1.gif");

        });

Answer 1

Here is an article to help you.

It is creating img elements in the DOM.

I have often done it by making a new Image() and then setting its src property to the image location. You get an event triggered when it loads, which is onload.

So a brief example would be

var preload = new Image();

preload.onload = function() { // I believe you need to define this before you set the src for IE
    alert('loaded');
}

preload.src = 'path/to/image.png';