PreLoad and cache image in jQuery for "loading" icon (or any better solution)

Question

I am working with dynamic tabs in jQuery. When the user opens a new tab, the content is loaded via ajax:

function addTab(tabId) {
    $("#tabs").tabs('add', tabId, tabId);
    $(tabId).load("...");
}

I want to display a loading icon while the content is being loaded. So I am setting the tab panel content in the add property of the tabs method:

var $tabs = $("#tabs").tabs({
        tabTemplate: '<li><a href="#{href}">#{label}</a></li>',
        add: function(event, ui) {
            $(ui.panel).append('<div>loading...</div>');
        }
    });

This is working great so far, the tab content is created showing "loading..." and then replaced by the proper content when it has been fetched.

What I'd like to do though is show one of the animated loading images. Obviously if I have to download that image every time then it kind of defeats the point.

I'm thinking I need to background load the image into memory on $(document).ready and then just put that image into my loading divs whenever they are required somehow. I have no idea how to go about that though. Or maybe there is a much simpler and better solution?

Note that there could be many tabs loading at the same time, and not all loading tabs are visible (a new tab can be background loaded without leaving the current tab), so just having one shared div which I show/hide on top of everything else doesn't work.

Any pointers apprectiated, thanks.

Answer 1

This might help:

http://engineeredweb.com/blog/09/12/preloading-images-jquery-and-javascript

also, if you don't already have an animated loading icon, this is an excellent resource:

http://ajaxload.info/