How do I stop images from being loaded by javascript multiple times

Hi all. I have a page which currently has a hidden field on it created in ASP.NET. The hidden field contains a path which javascript can use to load an image as the background of a DIV. The thing is, that the same page will more than likely be shown a few times in a row, as the user verifies various bits of information. So with each reload of the page, javascript is reloading the image file, which is obviously inefficient. Is there a way I can have the image load just once, and be cahced or something, so that it need only be loaded the first time the page is loaded.

The script I have is like this:

<pre>
//split hidden field around "," to obtain array of image paths/names
    fileNamesArray = $("input[id$=ImageNames]").val().split(",");
    
    //current page index tells javascript which element of array to look in for current page
    index = parseInt($("input[id$=CurrentPage]").val());
    
    //pop the last entry of the array as it is empty
    fileNamesArray.pop();
      
    imagepane = document.getElementById("right");
    
    imagepane.style.backgroundImage="url(../App_Themes/Default_Theme/loading.gif)";
    imagepane.style.backgroundRepeat="no-repeat";
    
imagepane.style.backgroundImage="url(" + fileNamesArray[index] + ")";
</pre>

HTML:

thanks for any light you can shed.

 

Since you just set a css property via javascript, javascript does not load the image, but the browser does. Normaly they have cached the image after the first load or am i getting somethign wrong here?

 

Right, so you the background image is not actually being reloaded each time after all, but the browser is already caching it? The line

imagepane.style.backgroundImage="url(" + fileNamesArray[index] + ")";

Code (markup):

is being executed every time the user hits a button, which usually causes the same page to be displayed again with the same background image.

Since I am working on local copies of files, it all happens so fast anyway, I can't see any difference in performance.

 

If you have Mozilla Firefox with Firebug plugin you can easily check that. Open Firebug on the Page, aktivate the Network Tab and reload the page. Then you'll see all HTTP request and among them should be your background image. Along with some other information you'll see the HTTP status code 304 Not Modified which means the image was cached by the browser

 

Oh cool. Thanks for that. I didn't realise you could do that with firebug. In fact its just shown me that my javascript isn't doing what I thought it was....oh bugger! Cheers for your help though!

 

Yeah, I got the 304 not modified message, so it was being cached. Thanks for you help and quick response.