Preloading With CSS 2

[ChrisRChamberlain]

Hi all

At the following URL, passing the mouse over a thumbnail image causes a larger animated .gif to appear over the thumbnail.

http://www.motrac.co.uk/motorhouse/

Thanks to BillyRayPreachersSon, the .css for the thumbnail and animated .gif is :-

.xx55xyz{
	margin:0px 5px;
	float:left;
	background: url(../jpgs/Picture_018-0.jpg) no-repeat;
   	width: 128px;
  	height: 96px;
   	display: block;
}
.xx55xyz:hover {
   margin:0px 5px 5px; 
   background: url(../gifs/output2.gif) no-repeat;
   width: 450px;
   height: 360px;
}

Typically, there may be up to 30 animated .gifs on the index page, but only one animated .gif can ever be viewed.

Is there a way to reduce the loading time of the animated .gif, please?

TIA

FAQ184-2483​

Chris
PDFcommander.com
motrac.co.uk

 

[BillyRayPreachersSon]

There are many ways to achieve this without using JavaScript, but probably one of the easiest to get to grips with is to have an off-page container with the background image set to be the image you want to preload.

This method is good for several reasons:

- It works in browsers that do not always preload when the image is not visible (e.g. Opera)

- It gives you full control over when you preload the image (by moving the containers around)

- It's simple

If you want to preload all of the images after the rest of your content, right before the closing </body> tag, put something like this:

<div id="imagePreloadContainer">
   <div id="imagePreload001"></div>
   <div id="imagePreload002"></div>
   ...
   <div id="imagePreload00n"></div>
</div>

and then in your style sheet, add something like this:

#imagePreloadContainer,
#imagePreloadContainer div {
   position: absolute;
   width: 0px;
   height: 0px;
   overflow: hidden;
}

#imagePreloadContainer {
   left: -10000px;
   top: -10000px;
}

#imagePreload001 {
   background: url(../gifs/whatever001.gif) no-repeat;
}

#imagePreload002 {
   background: url(../gifs/whatever002.gif) no-repeat;
}

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Tech Snippets & Info:

http://www.codecouch.com/

 

[ChrisRChamberlain]

Dan

Thanks for your reply.

Could you explain how :-

#imagePreloadContainer,
#imagePreloadContainer div {
   position: absolute;
   width: 0px;
   height: 0px;
   overflow: hidden;
}

works please?

FAQ184-2483​

Chris
PDFcommander.com
motrac.co.uk

 

[BillyRayPreachersSon]

Sure... it makes the image container and any DIV element it contains take up 0 space (0px width, 0px height).

I suppose the same effect could have been achieved with a class on the individual DIVs, negating the need for a container... but I like to compartmentalise my web page structure, rather than have many common DIVs 'floating' off the body.

The 0 width/height code isn't absolutely necessary, but I think it's a good 'fail safe' just in case the DIVs are ever moved.

Dan




Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Tech Snippets & Info:

http://www.codecouch.com/

 

[ChrisRChamberlain]

Dan

Excellent as ever!

...and thanks for your lucid explanation.

FAQ184-2483​

Chris
PDFcommander.com
motrac.co.uk