Dynamically added cached images take too long to load

[antishok]

Hi,

I'm writing a page which has a somewhat similar folder tree to that of
the windows explorer, where each folder is made of a <SPAN> tag
consisting of the folder image (closed or open) and the folder name.

When certain actions are performed by the user, more folders (spans)
are dynamically added using javascript function appendChild().
I add a new folder span to a container span which holds the whole
tree.

This all works fine, except for one thing - the browser (IE) reloads
each of the folder images for each span that I add. This wouldn't be a
hassle if I were only adding 5-10 folders, but certain user actions
can lead to a thousand or more folders added in an instant. The
folders are added quickly, but their images are loaded one by one..
(This could mean that it takes over a minute for all of them to be
loaded and is not very aesthetic)
The images are the same image, so I don't understand why the browser
doesn't just use the cached copy of the image..

I'd appreciate any help on this matter, thanks in advance,
Uri G.

[Andrew Urquhart]

antishok wrote:

Hi,
Hi
I'm writing a page which has a somewhat similar folder tree to that of
the windows explorer, where each folder is made of a <SPAN> tag
consisting of the folder image (closed or open) and the folder name.
If I were you I'd use more semantic markup such as an ordered list or
definition list and style with CSS as appropriate.
When certain actions are performed by the user, more folders (spans)
are dynamically added using javascript function appendChild().
I add a new folder span to a container span which holds the whole
tree.

This all works fine, except for one thing - the browser (IE) reloads
each of the folder images for each span that I add. This wouldn't be a
hassle if I were only adding 5-10 folders, but certain user actions
can lead to a thousand or more folders added in an instant. The
folders are added quickly, but their images are loaded one by one..
(This could mean that it takes over a minute for all of them to be
loaded and is not very aesthetic)
The images are the same image, so I don't understand why the browser
doesn't just use the cached copy of the image..

If the web server is setting no-cache headers on the images then IE will
probably obey the instruction and keep re-fetching expired images.

Actually thinking about what I said earlier regarding semantic markup
and CSS an aside would be to use CSS background images on <li>s so you
don't need to write out image tags dynamically, just class names, for
example:

Some CSS:
#foldertree {
padding: 0;
margin: 0;
font-family: arial, helvetica, sans-serif;
border: 1px solid #dcdcdc;
width: 20%;
overflow: scroll;
}
#foldertree li {
padding: 1px 2px 1px 20px;
margin: 0;
color: #000000;
background: #ffffff url(/icons/file.gif) 0 0.2em no-repeat;
list-style: none;
}
#foldertree .fldr {
color: #000000;
background: #ffffff url(/icons/folder.gif) 0 0.2em no-repeat;
}
#foldertree .img {
color: #000000;
background: #ffffff url(/icons/image.gif) 0 0.2em no-repeat;
}

Your dynamically created markup:
<ol id="foldertree">
<li class="fldr">Tools</li>
<li class="fldr">Music</li>
<li class="fldr">Images
<ol>
<li class="fldr">Holiday</li>
<li class="img">forest.jpg</li>
<li class="img">fish.gif</li>
<li class="img">melons.png</li>
</ol>
</li>
<ol>
--
Andrew Urquhart
- FAQ: http://jibbering.com/faq
- Archive: http://groups.google.com/groups?grou...ang.javascript
- Reply: http://www.andrewu.co.uk/about/conta...ject=Re%3A+clj