Preloading graphics- can it really be done?

Mavent · Share | #1 (**permalink**) 02-29-2012, 01:34 PM

I've dabbled with this problem off and on for a couple of years now- I hate the fact that my Roller graphics "flicker" the first time they're loaded onto a page. I've tried all kinds of so-called solutions for pre-loading the rollover states, but absolutely nothing has ever actually worked. Most suggestions seem to revolve around loading the graphics with display:none, or loading them offscreen, but none of these things have ever worked for me. The only thing that's ever really worked for me is putting the rollover state into the same graphic as the normal state, then sliding the entire graphic up and down within a Div. While that's at least a workable solution, it's a ton of work. Surely there must be some way to just tell a graphic to load itself into memory.

Does anyone here know of a method of preloading that actually works?
Thanks in advance!

Dan Williamson · #2 (**permalink**) 02-29-2012, 03:18 PM

If you mean what I think you mean then not really, as it has to be loaded for the first time each time, unless your images aren't optimised it shouldn't be very noticeable.

Every time a user clears his cache, or get's a newer cached version of your website everything is loaded again.

**J. H. Rasmussen** · #3 (**permalink**) 02-29-2012, 06:31 PM

You can use javascript for that:

Code:

<script type="text/javascript">
image1 = new Image(); 
image1.src = "/images/imagefile1.jpg";
image2 = new Image(); 
image2.src = "/images/imagefile2.jpg";
// etc...
</script>

Will load the images in to the web browsers cache so they display rigth away.
Ofcause you should make sure the javascript is located in the beginning of the document. Forexample just after <body>

CerealNut · #4 (**permalink**) 02-29-2012, 06:52 PM

The only way I know of to stop the flicker is by using a sprite technique. You just put a hover selector on the object and update the background-position attribute to bump down to the second image within the sprite.

Most people use GIF's, but that will also work with JPG's and PNG's.

Search for CSS rollover in google.

This is an example of the css code I use for an image rollover:

Code:

.image1{
    background: transparent url(/images/image1.gif) repeat scroll  0 0px ;
    height: 564px;
    width: 553px;
}
.image1:hover{
    background: transparent url(/images/image1.gif) repeat scroll  0 564px ;
}

Mavent · #5 (**permalink**) 02-29-2012, 10:23 PM

Quote:

Originally Posted by J. H. Rasmussen

You can use javascript for that:

Code:

<script type="text/javascript">
image1 = new Image(); 
image1.src = "/images/imagefile1.jpg";
image2 = new Image(); 
image2.src = "/images/imagefile2.jpg";
// etc...
</script>

Will load the images in to the web browsers cache so they display rigth away.
Ofcause you should make sure the javascript is located in the beginning of the document. Forexample just after <body>

That actually worked! Thanks man!

**J. H. Rasmussen** · #6 (**permalink**) 03-01-2012, 02:14 AM

You're welcome :-)