Delay Image Loading

[buddymoore]

I have hunted around for a solution to this but I'm unable to get a satifactory answer. I am using DOM to swap between DIVs to give the effect of a tabbed display window. Each of the DIVs contains its own images. I don't want all of these images to load with the page but rather just to load when the relevant DIV is selected. (All but 1 DIVs are hidden initially.)

By default, is this the case? Or can I use a function to not allow the images to load until I tell them to?

kindest regards

[Mr J]

Just run a function to load the appropriate images when the div is shown, not sure which would be the best way to reference the image tags though, ordinal or by name.

You could wrap them in a div something like

<script>
<!--
var YourImages = [
["pic1.jpg","pic2.jpg","pic03.jpg"],
["pic04.jpg","pic5.jpg"],
["pic6.jpg","pic7.jpg","pic8.jpg"]
]

function getImages(n){
el=document.getElementById("div"+n).getElementsByTagName("img")

for (i=0;i<YourImages[n].length;i++) {
el[i].src=YourImages[n][i]
}

}

// -->
</script>

<a href="#null" onclick="getImages(0)">Tab 1</a>
<a href="#null" onclick="getImages(1)">Tab 2</a>
<a href="#null" onclick="getImages(2)">Tab 3</a>
<BR><BR>

<div id="div0">
<img src="" id="pic0" width="150" height="75">
<img src="" id="pic1" width="150" height="75">
<img src="" id="pic2" width="150" height="75">
</div>
<div id="div1">
<img src="" id="pic0" width="150" height="75">
<img src="" id="pic1" width="150" height="75">
</div>
<div id="div2">
<img src="" id="pic0" width="150" height="75">
<img src="" id="pic1" width="150" height="75">
<img src="" id="pic2" width="150" height="75">
</div>

[buddymoore]

My friend! Thank you sooo much. That is the business. In an age of broadband it probably isn't too necessary but I guess we must still cater for those browsing by the minute.

Thanks again

[Kor]

You may also create the pictures (or the whole DIVs) at a time, using DOM methods (createElement, setAttribute, appendChild ... and so on). It depends on what you want and how your page looks like.