Preloading img elements

Question

Hi,

I currently have a preloading image javascript script:

function MM_preloadImages() { 
  var d = document; 

  if(d.images){ 
     if(!d.MM_p )
        d.MM_p=new Array();

     var i,j=d.MM_p.length,a=MM_preloadImages.arguments;

     for(i=0; i<a.length; i++){
        if (a[i].indexOf("#")!=0){
           d.MM_p[j]=new Image; 
           d.MM_p[j++].src= '/img' + a[i];
        }
     }
  }
}

The problem is that i have to manually update the array when images are added deleted etc.

Is there anyway of automating this or is there a library.

Most of the image urls are element hrefs.

Obviously I could write something server side but I want to check if there is something out there already.

Cheers

Paul

Answer 1

Here is someone who did what you are trying to do with jQuery:

http://www.filamentgroup.com/lab/update_automatically_preload_images_from_css_with_jquery/

Edit: Actually this is not quite what you are looking for as this preloads images from CSS files - I am going to leave this here in case this is still helpful.

Answer 2

The trouble is by the time the elements are available in the DOM for JS to inspect the images are already being loaded anyway.

AFAIK there is no way to do this (the CSS based inspection works because that's loaded before the body content), but a superior solution for the problem in general is CSS spriting.