stop images preloading 4

[richcleverley]

Hi all,

I am building some galmlery pages just using css (no javascript at all), and basing them on

http://www.cssplay.co.uk/menu/gallery_click.html

by Stu Nicholls.

He says in his notes to the page that the images don't preload (which is what I want!!). However, when I make my own page with 24 images they obviously do because the site can take a while to load fully.

Does anyone know if this behaviour can be stopped so just the thumbnails load up and the main images when I click on the images.

Thanks,

Richard

 

[trollacious]

The images are loading because you have it written in your code for them to load, not preload. The following is copied and pasted from the page source of the URL you provided:

<div class="thumbs">
<a class="gallery slidea" href="#nogo"><em><img src="london/pic2.jpg" alt="LSE Square" title="LSE Square" /></em><span>LSE Square<br />Photographs courtesy of stock.xchng</span></a>
<a class="gallery slideb" href="#nogo"><em><img src="london/pic3.jpg" alt="Buckingham Palace" title="Buckingham Palace" /></em><span>Buckingham Palace<br />Photographs courtesy of stock.xchng</span></a>
<a class="gallery slidec" href="#nogo"><em><img src="london/pic4.jpg" alt="Tower Bridge" title="Tower Bridge" /></em><span>Tower Bridge<br />Photographs courtesy of stock.xchng</span></a>
<a class="gallery slided" href="#nogo"><em><img src="london/pic5.jpg" alt="Tower of London" title="Tower of London" /></em><span>Tower of London<br />Photographs courtesy of stock.xchng</span></a>
<a class="gallery slidee" href="#nogo"><em><img src="london/pic6.jpg" alt="Houses of Parliament" title="Houses of Parliament" /></em><span>Houses of Parliament<br />Photographs courtesy of stock.xchng</span></a>
<a class="gallery slidef" href="#nogo"><em><img src="london/pic7.jpg" alt="St. Paul's Cathedral" title="St. Paul's Cathedral" /></em><span>St. Paul's Cathedral<br />Photographs courtesy of stock.xchng</span></a>
<a class="gallery slideg" href="#nogo"><em><img src="london/pic8.jpg" alt="The London Eye" title="The London Eye" /></em><span>The London Eye<br />Photographs courtesy of stock.xchng</span></a>
<a class="gallery slideh" href="#nogo"><em><img src="london/pic9.jpg" alt="Albert Hall" title="Albert Hall" /></em><span>Albert Hall<br />Photographs courtesy of stock.xchng</span></a>
<a class="gallery slidei" href="#nogo"><em><img src="london/pic10.jpg" alt="Wandsworth Common" title="Wandsworth Common" /></em><span>Wandsworth Common<br />Photographs courtesy of stock.xchng</span></a>
<a class="gallery slidej" href="#nogo"><em><img src="london/pic11.jpg" alt="London Taxi Cab" title="London Taxi Cab" /></em><span>London Taxi Cab<br />Photographs courtesy of stock.xchng</span></a>
</div>

You use the thumbnails as background images, and size the actual images down to fit over the top of the thumbnails. If you were to use the thumbnails for the image source and forget about using them as background images, the larger images wouldn't load before someone clicks on a thumbnail.

Lee

 

[richcleverley]

Like I said, it isn't my code, just something I'm using for a site.

On the cssplay site Stu says the images don't preload, but you seem to be suggesting that they are, or am I getting this completely wrong.

Thanks,

Richard

 

[1DMF]

they are not pre-loading, you are putting them on the page with the image tag and using CSS to hide them. if you change this line

a.gallery em, a.gallery span {display:none;}

to

a.gallery em, a.gallery span {display:block;}

it might make more sense!

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.

 

[trollacious]

Stu is right that the CSS isn't preloading the images. The HTML is actually loading the larger images and sizing them down to the same dimensions as the thumbnails that are used as background images, then pasting the sized down images over the background images. When you do a mouseover the sized down image, the display changed to none and the thumbnail behind it, which looks identical, is diplayed. But the sized down images are loaded full size before the browser shrinks them down. The HTML I posted from your URL shows that the large images are being loaded and displayed on the page, and your CSS limits the size of the area they're displayed in.

Lee

 

[richcleverley]

Ahh, I see now (sorry for being so thick on this one).

Wpuld there be any way of changing it so the main images aren't loaded at all until he thumbnail is clicked?

Thanks Guys, I'll give you both a star for pointing out what should have been obvious.

Richard

 

[1DMF]

no not with the CSS effect you have. You would need to use JS and even then when you use mouse rollover effects you usually end up "pre-loading" the images to get rid of the nasty pause between rollover and image displaying.



"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.

 

[Vragabond]

I don't know if I can agree with what's been said. I mean, if Stu Nichols says it is not being preloaded, I would pretty much believe him.

I don't know how much you've changed the code from the one in example, but this is what I gather from the example.

1. Stu uses background thumbnail images for thumbnails. Those are loaded as page loads.
2. On clicking these thumbnails, Stu changes the display of the element (em) containing the picture from none to block. This makes the image inside appear.

Now, why is this not being preloaded? AFAIK elements that are not displayed (have a display of none) are simply not rendered or loaded. When the display changes to block, the images is then actually loaded. So it should work as Stu claims it works.

 

[richcleverley]

Thanks Vragabond,

It certainly seems to be preloading/loading the images. I get no lag at all when I click on a thumbnail but the initial page loading is painfully slow.

I'm not bothered about having a slight lag on the inital load of an image when the thumbnail is clicked if that mean the rest of the page loads quickly.

Here's my code

HTML

<div id="container_top">
<div class="thumbs">
<a class="gallery slidea" href="#nogo"><em><img src="images/Image00001.jpg" alt="Artistic Nude" title="" /></em><span>Artistic Nude<br />Click For Full size image</span></a>
<a class="gallery slideb" href="#nogo"><em><img src="images/Image00002.jpg" alt="" title="Artistic Nude" /></em><span>Artistic Nude<br />Click For Full size image</span></a>
<a class="gallery slidec" href="#nogo"><em><img src="images/Image00003.jpg" alt="" title="" /></em><span>Artistic Nude<br />Click For Full size image/span></a>
<a class="gallery slided" href="#nogo"><em><img src="images/Image00004.jpg" alt="" title="T" /></em><span>Artistic Nude<br />Click For Full size image</span></a>

<a class="gallery slidee" href="#nogo"><em><img src="images/Image00005.jpg" alt="" title="" /></em><span>Artistic Nude<br />Click For Full size image</span></a>
<a class="gallery slidef" href="#nogo"><em><img src="images/Image00006.jpg" alt="" title="" /></em><span>Artistic Nude<br />Click For Full size image</span></a>
<a class="gallery slideg" href="#nogo"><em><img src="images/Image00007.jpg" alt="" title="T" /></em><span>Artistic Nude<br />Click For Full size image</span></a>
<a class="gallery slideh" href="#nogo"><em><img src="images/Image00008.jpg" alt="" title="" /></em><span>Artistic Nude<br />Click For Full size image</span></a>
<a class="gallery slidei" href="#nogo"><em><img src="images/Image00009.jpg" alt="" title="" /></em><span>Artistic Nude<br />Click For Full size image</span></a>
<a class="gallery slidej" href="#nogo"><em><img src="images/Image00010.jpg" alt="" title="" /></em><span>Artistic Nude<br />Click For Full size image</span></a>
<a class="gallery slidek" href="#nogo"><em><img src="images/Image00011.jpg" alt="" title="" /></em><span>Artistic Nude<br />Click For Full size image</span></a>
<a class="gallery slidel" href="#nogo"><em><img src="images/Image00012.jpg" alt="" title="" /></em><span>Artistic Nude<br />Click For Full size image</span></a>
<a class="gallery slidem" href="#nogo"><em><img src="images/Image00013.jpg" alt="" title="" /></em><span>Artistic Nude<br />Click For Full size image</span></a>
<a class="gallery sliden" href="#nogo"><em><img src="images/Image00014.jpg" alt="" title="" /></em><span>Artistic Nude<br />Click For Full size image</span></a>
<a class="gallery slideo" href="#nogo"><em><img src="images/Image00015.jpg" alt="" title="" /></em><span>Artistic Nude<br />Click For Full size image</span></a>
<a class="gallery slidep" href="#nogo"><em><img src="images/Image00016.jpg" alt="" title="" /></em><span>Artistic Nude<br />Click For Full size image</span></a>
<a class="gallery slideq" href="#nogo"><em><img src="images/Image00017.jpg" alt="" title="" /></em><span>Artistic Nude<br />Click For Full size image</span></a>
<a class="gallery slider" href="#nogo"><em><img src="images/Image00018.jpg" alt="" title="" /></em><span>Artistic Nude<br />Click For Full size image</span></a>
<a class="gallery slides" href="#nogo"><em><img src="images/Image00019.jpg" alt="" title="" /></em><span>Artistic Nude<br />Click For Full size image</span></a>
<a class="gallery slidet" href="#nogo"><em><img src="images/Image00020.jpg" alt="" title="" /></em><span>Artistic Nude<br />Click For Full size image</span></a>
<a class="gallery slideu" href="#nogo"><em><img src="images/Image00021.jpg" alt="" title="" /></em><span>Artistic Nude<br />Click For Full size image</span></a>
<a class="gallery slidev" href="#nogo"><em><img src="images/Image00022.jpg" alt="" title="" /></em><span>Artistic Nude<br />Click For Full size image</span></a>
<a class="gallery slidew" href="#nogo"><em><img src="images/Image00023.jpg" alt="" title="" /></em><span>Artistic Nude<br />Click For Full size image</span></a>
<a class="gallery slidex" href="#nogo"><em><img src="images/Image00024.jpg" alt="" title="" /></em><span>Artistic Nude<br />Click For Full size image</span></a>
</div>
<h1>Artistic<br /><br />Nudes</h1>
</div>

CSS
[/code]
a, a:visited {color:#000;}



/* common styling for all galleries */

a.gallery, a.gallery:visited {display:block; display:inline-block; color:#000; text-decoration:none; border:1px solid #000; width:75px; height:75px; float:left; margin:4px; z-index:50;}

a.slidea {background:url(artisticthumbs/Image00001.jpg) no-repeat;}

a.slideb {background:url(artisticthumbs/Image00002.jpg) no-repeat;}

a.slidec {background:url(artisticthumbs/Image00003.jpg) no-repeat;}

a.slided {background:url(artisticthumbs/Image00004.jpg) no-repeat;}

a.slidee {background:url(artisticthumbs/Image00005.jpg) no-repeat;}

a.slidef {background:url(artisticthumbs/Image00006.jpg) no-repeat;}

a.slideg {background:url(artisticthumbs/Image00007.jpg) no-repeat;}

a.slideh {background:url(artisticthumbs/Image00008.jpg) no-repeat;}

a.slidei {background:url(artisticthumbs/Image00009.jpg) no-repeat;}

a.slidej {background:url(artisticthumbs/Image00010.jpg) no-repeat;}

a.slidek {background:url(artisticthumbs/Image00011.jpg) no-repeat;}

a.slidel {background:url(artisticthumbs/Image00012.jpg) no-repeat;}

a.slidem {background:url(artisticthumbs/Image00013.jpg) no-repeat;}

a.sliden {background:url(artisticthumbs/Image00014.jpg) no-repeat;}

a.slideo {background:url(artisticthumbs/Image00015.jpg) no-repeat;}

a.slidep {background:url(artisticthumbs/Image00016.jpg) no-repeat;}

a.slideq {background:url(artisticthumbs/Image00017.jpg) no-repeat;}

a.slider {background:url(artisticthumbs/Image00018.jpg) no-repeat;}

a.slides {background:url(artisticthumbs/Image00019.jpg) no-repeat;}

a.slidet {background:url(artisticthumbs/Image00020.jpg) no-repeat;}

a.slideu {background:url(artisticthumbs/Image00021.jpg) no-repeat;}

a.slidev {background:url(artisticthumbs/Image00022.jpg) no-repeat;}

a.slidew {background:url(artisticthumbs/Image00023.jpg) no-repeat;}

a.slidex {background:url(artisticthumbs/Image00024.jpg) no-repeat;}

a.gallery em, a.gallery span {display:none;}

a.gallery:hover {border:1px solid #fff;}





/* styling for TOP gallery */

#container_top {position:relative; width:780px; height:1025px; background:#d1c8c3; border:1px solid #a49188; margin:1em auto;}

#container_top img {border:0;}

#container_top .thumbs {position:absolute; left:0; top:0;}

#container_top a.gallery:hover span {display:block; position:absolute; width:780px; height:50px; top:250px; left:5px; padding:5px; font-style:italic; color:#fff; z-index:100;}

#container_top a.gallery:hover span:first-line {font-style:normal; font-weight:bold; font-size:1.1em; color:#000;}

#container_top a.gallery:active, #container_top a.gallery:focus {border:1px solid #000;}

#container_top a.gallery:active em, #container_top a.gallery:focus em {display:block; position:absolute; width:780px; height:250px; top:300px; left:185px; padding:5px; color:#000; border:0px solid #3d330f; z-index:50;}

#container_top h1 {clear:both; margin:0; padding-top:300px; text-align:center; font-family: georgia, "times new roman", serif; font-size:3em; font-weight:normal; color:#fff;}

#container_top h1 em {font-size:0.6em; color:#000;}
[/code]

Thanks,

Richard

 

[richcleverley]

Interstingly, it seems that FF and IE6 does load the images if they are in a display:none.

I just found this page

http://www.quirksmode.org/css/displayimg.html

which shows this is what happens.

Anybody know how to stop this happening?

Richard

 

[1DMF]

If it's relative to the way a browser behaves then no, as that link says it only works in Opera.

IE7 may behave differently, but most people will still be using IE6 & FF anyways when IE7 comes out (unless MS forces IE7 upon us)

Vragabond, may know a way of doing this with CSS, I only know a way of doing this with JavaScript.

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.

 

[richcleverley]

Got a message from Stu Nicholls, where he said that the code did preload the images (he had made some changes). Very kindly he put the original one up so it now works a lot faster for what I am trying to do.

http://www.cssplay.co.uk/menu/gallery_click2.html

Thanks for trying to help and also for expanding my knowledge further.

Richard

 

[1DMF]

I noticed

a.slidea em {background:url(london/pic2.jpg) 5px 5px  no-repeat;}
a.slideb em {background:url(london/pic3.jpg) 5px 5px  no-repeat;}
a.slidec em {background:url(london/pic4.jpg) 5px 5px  no-repeat;}
a.slided em {background:url(london/pic5.jpg) 5px 5px  no-repeat;}
a.slidee em {background:url(london/pic6.jpg) 5px 5px  no-repeat;}
a.slidef em {background:url(london/pic7.jpg) 5px 5px  no-repeat;}
a.slideg em {background:url(london/pic8.jpg) 5px 5px  no-repeat;}
a.slideh em {background:url(london/pic9.jpg) 5px 5px  no-repeat;}
a.slidei em {background:url(london/pic10.jpg) 5px 5px  no-repeat;}
a.slidej em {background:url(london/pic11.jpg) 5px 5px  no-repeat;}

he had done this.

Interesting to know if making a background image 5px by 5px even though the actual image is much larger, makes it not load the full size image.

If you do the same with the img tag it makes no difference if a picture is 1024x1024 and you place it via an img tag giving height and width of 5 x 5 it still downloads the large image but just displays it 5 x 5 not gaining anything in speed.

does CSS make the browser behave differently for sized background images regardless of actual images source size?

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.

 

[Vragabond]

1DMF, you're reading it wrong. What Stu did was change from using images to using background images. Apparently the latter do not preload while the images do. What you think is sizing the background, is actually positioning: 5px from top and 5px from left. Having small or big image should make not change, but apparently having it as a background of an element or an actual element does. I guess one could say that CSS does not load CSS inside elements that are not displayed, but it does load elements themselves.

 

[1DMF]

thanks for explaining that Vragabond, so because the <em> is within the <a> tag and is using a background image on both, because the <em> is display:none, and using a BG image, it is not pre-loaded. So why is there no delay in displaying the images? I click and they apear instant and i've cleared my cache etc..

I would expect a slight delay in display but there isn't any, so I created a test to proove they are still loading and they are

http://www.homeloanpartnership.co.uk/gallery2.html

I have a tiny thumbnail saved 10 times and created the actual images 2000 x 3000 approx. now see how slow the thumbnails load, also look at the status bar, it shows the main images downloading.

I'm still not convinced you can do this with CSS.

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.

 

[Vragabond]

It works lovely (your example) with FF, but you're right, in IE it preloads everything. Check it out in FF though, you will see the delay in loading the big picture and the thumbnails will load quickly.

 

[1DMF]

ah, so it is a browser issue with IE6 , I wonder if this will be fixed with IE7, one must assume it works in Safari or Netscape , not something i have to test with.

Worth keeping in mind though for future design, once fixed as a position works and margins on absolute/fixed elements work, alot of the tedious and unnecessary javascript can go from my pages!

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.

 

[richcleverley]

What a surprise that happens in IE!!!

Hopefully it will fix itself in IE7, what a pain though.

Richard

 

[1DMF]

lol - yup, but a worth while lesson none the less!

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.