View Full Version : Precache images for use with innerHTML

Afrow UK
04-30-2007, 06:37 PM
When setting the content of a div with innerHTML in IE, any images are downloaded at that moment in time and this shows their URL loading on the status bar. Also, all the images disappear and then reappear and this is very noticeable.

There are 12 images and I'm setting the div HTML dynamically with innerHTML, so is there a way to precache these 12 images so that they aren't all re-downloaded again?

I've tried placing the 12 images outside the div within another div that has a height of 0 and overflow: hidden set, but it still happens in IE.


04-30-2007, 06:45 PM
check out this post:


it only sets one image, but you can set multiple images.



Afrow UK
05-01-2007, 10:09 AM
This is what I tried originally and I've tried it again but put the code in the <head> but it still does not work:

<script type="text/javascript">

// Session settings.
var session_id = 4;
var user_name = "SAS^Afrow UK";

// Precache smilies.
smilies = new Array();
smilies[0] = new Image(15, 15);
smilies[0].src = 'gfx/smilies/9.gif';
smilies[1] = new Image(15, 15);
smilies[1].src = 'gfx/smilies/10.gif';
smilies[2] = new Image(15, 15);
smilies[2].src = 'gfx/smilies/11.gif';
smilies[3] = new Image(15, 20);
smilies[3].src = 'gfx/smilies/12.gif';
smilies[4] = new Image(19, 22);
smilies[4].src = 'gfx/smilies/13.gif';
smilies[5] = new Image(15, 15);
smilies[5].src = 'gfx/smilies/1.gif';
smilies[6] = new Image(15, 15);
smilies[6].src = 'gfx/smilies/2.gif';
smilies[7] = new Image(15, 15);
smilies[7].src = 'gfx/smilies/3.gif';
smilies[8] = new Image(15, 15);
smilies[8].src = 'gfx/smilies/4.gif';
smilies[9] = new Image(15, 15);
smilies[9].src = 'gfx/smilies/5.gif';
smilies[10] = new Image(15, 15);
smilies[10].src = 'gfx/smilies/6.gif';
smilies[11] = new Image(15, 15);
smilies[11].src = 'gfx/smilies/7.gif';
smilies[12] = new Image(15, 15);
smilies[12].src = 'gfx/smilies/8.gif';


All the smilies still flash when the HTML is re-written with innerHTML.
I was wondering, is it possible to document.write within a div?


Afrow UK
05-01-2007, 11:59 PM
I've made progress with this. Instead of setting the entire HTML with innerHTML for an element, I just add a new element with appendChild().
So now only the newly added image is downloaded rather than all of them, but the image pre-caching is still not doing anything. It seems that IE wants to download a new copy anyway :(