Preload images for AJAX content using jQueryUI-tabs

Question

So I've got a pretty nice application going using ui-tabs.. problem is, I cannot for the life of me figure out a way to pre-load images in my ajax content before the tab panel is shown. The only way I can think of is to create my own ajax functionality for the loading of tab-panel content, and adding something like this to the ajax call:

success: function(response){
    $(response).find('img').preload({
            onFinish: function(){
                    currentTabPanel.show();
            }
    });

}

But I'm thinking there's GOT to be a better way of going about this using the built in AJAX methods and events in the jQueryUi.tabs() object.. I just don't think I'm seeing it... arg.. any ideas??

Answer 1

What is response? What does it represent?

Assume you have a list of objects representing images called imgList:

var imagePreloader = new Image();

if(imgList.length != 0)
{
   imagePreloader.load(function() {
      if(imgList.length != 0)
      {
         var img = imglist.pop();
         imagePreloader.src = img.imgSrc;
      }
      else
      {
         currentTabPanel.show();
      }
   });

   imagePreloader.src = imgList.pop().imgSrc;   
}

Answer 2

This is a dirty little script I use sometimes but it works great:

var imgstopreload = new Array('file1.jpg', 'file2.jpg', 'etc.jpg');
for (x in imgstopreload){
    (new Image).src = imgstopreload[x];
}

I wouldn't do this for lots of big images because the page won't finish loading until the images are done, but if you have to have them ready, it works. Just put it in your index :)