question about divs and downloading images

[gib65]

If I had a whole bunch of images in a div and on laoding the page that div's display was set to 'none' (as in mydiv.style.display = 'none'), would the browser bother downloading the images?

[auntnini]

Check this http://www.w3schools.com/css/css_display_visibility.asp: "The display property specifies if/how an element is displayed, and the visibility property specifies if an element should be visible or hidden. ... visibility:hidden hides an element, but it will still take up the same space as before [and will] still affect the layout." Whereas, "... display:none hides an element, and it will not take up any space. The element will be hidden, and the page will be displayed as the element is not there..."

Are you perhaps thinking about "pre-loading" images that will be used for rollovers? Such as the following (demo at http://webdocdo.tripod.com/genericRollover/multiple.html#start):


<script language="JavaScript" type="text/javascript">
<!-- //LARGE IMAGES
pic01 = new Image
pic02 = new Image

pic01.src = "images/pic01.jpg"
pic02.src = "images/pic02.jpg"

//THUMBNAILS
pic01a = new Image
pic02a = new Image

pic01a.src = "images/pic01a.gif"
pic02a.src = "images/pic02a.gif"

// -->
</script>

[gib65]

No, not rollovers. What I'm doing is I'm trying to download the markup for a bunch of image thumbnails and hyperlinks around them, but there are so many thumbs that for some slower client computers, it takes too longer for the page to load. The solution I'm attempting is to group the images into separate divs and only make one visible at a time. That way, the markup gets downloaded (which shouldn't take any time at all) but not the image files (which do).

The reason I need them all on one page (as opposed to separating them into several pages and linking them) is because I'm trying to do some fancy shmancy javascript and DHTML work and the code so happens to require access to any of the images (actually the links around the images) the viewer could possibly want to see.

[zip222]

The Activity window in Safari will show you whether or not an item is being loaded. Not sure if any other browsers have something like this.

[Beverleyh]

You could preload images as backgrounds in 0 x 0 divs, like this:

In the HTML:

<div id="pic1"></div>
<div id="pic2"></div>
<div id="pic3"></div>

In the CSS:

#pic1, #pic3, #pic3 { position:absolute; top:0px; left:0px; width:0px; height:0px; }

#pic1 { background: url("/images/pic1.jpg") 0 0 no-repeat; }
#pic2 { background: url("/images/pic2.jpg") 0 0 no-repeat; }
#pic3 { background: url("/images/pic3.jpg") 0 0 no-repeat; }

The divs dont show as they are all "0" in size, plus they are all absolutely positioned so what is there overlays each other, out of the way at the top left of the screen.

[gib65]

I have since tested this theory and it doesn't work. Even if you make the div's display equal to 'none', the images will still download.

[djr33]

You're going about this entirely the wrong way then: if you have the image in your source code, it will always download. That's why it would be in your source code: so it downloads.

If you want to avoid this, then you will need to dynamically add the content after the original source has already been downloaded: use Ajax, a Javascript function [with filenames stored in the script], or an iframe.