...

View Full Version : Precache images for use with innerHTML



Afrow UK
04-30-2007, 05: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.

Stu

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

http://www.codingforums.com/showthread.php?p=506690#post506690


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


pics[0]
pics[1]
pics[2]

ect......

Afrow UK
05-01-2007, 09: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';

//]]>
//-->
</script>


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?

Stu

Afrow UK
05-01-2007, 10: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 :(

Stu



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum