Friday, October 20, 2006

Preloading Images the jQuery way

jQuery is capable of creating elements without using the DOM (i.e. document.createElement). You can take advantage of this to preload images, and it involves less code that most other solutions - if you ignore the fact that jQuery has overhead and assume you are using jQuery for tasks other than preloading.

jQuery.preloadImages = function()
{
    for(var i = 0; i<arguments.length; i++)
    {
        jQuery("<img>").attr("src", arguments[i]);
    }
}

You can then preload images before the page has fully loaded. Useful for when you implement rollover images (as there will not be the usual delay you normally get after mousing over a rollover image).

$.preloadImages("foo.jpg", "bar.gif", "baz.png");
$(
    function()
    {
        alert("document ready");
    }
)

1 comment:

Nathan said...

Nice work.

It would be fantastic if this somehow incorporated the image object's onload event to allow you to execute code once your images were loaded. Any thoughts on making that work using jQuery?