Preloading images

Quick how to, anyone?

[Nick_W]

Hi all, I just found this Interesting function [webmasterworld.com] from rewboss.

But, I need something quick and dirty, and I need it yesterday ;)

So, can someone please show me how to preload images?

Thanks

Nick

[tedster]

There are two quick ideas on this page [webmasterworld.com].

[Nick_W]

Right!

So do I just do:

<script type="text/javascript">
image01=new Image(/images/button1.jpg)
</script>

and then in the HTML

<img src="/images/button2.jpg" onmouseover="image01" />

er.... I'm not very good at JS ;)

Nick

[tedster]

IMAGE PRELOAD
You can do this in the head, or in an external .js file (where you don't need the script and comment tags)

<script type="text/javascript" language="JavaScript">
<!--
image01=new image(www,hhh)
image02=new image(www,hhh)

image01.src="firstimagename.gif"
image02.src="secondimagename.jpg"
//-->
</script>

The first two lines create new image objects - that's half the job. The second two lines define the source of those objects, and when that code executes these two images go into the cache.

You can use whatever object names you like, so this is equivalent code using some real filenames as well:

<script type="text/javascript" language="JavaScript">
<!--
microsoft=new image(www,hhh)
apple=new image(www,hhh)

microsoft.src="windows.gif"
apple.src="macintosh.png"
//-->
</script>

ROLLOVER CODE
Now for some rollover code - it seems like that's what you're asking about here, not just preloading images for use on a later page.

The onmouseover and onmouseout should be in an anchor tag for cross brower compatibility, not in the image tag. What the image tag needs is a name attribute.

<a href="foo.htm" onmouseover="mac.src=apple.src" onmouseout="mac.src='imac.gif'"><img src="imac.gif" name="mac"></a>

So we've given the image a name attribute of "mac". Then the onmouseover and onmouseout events in the anchor can access the image tag and redefine its src attribute when a mouseover event happens. In this code the image starts as imac.gif, rolls over to macintosh.png and then back.

Note that I only used the second of the preloaded images in this rolloever. There's no need to preload the starting image state, because the HTML itself loads that. So there's still an unused image in the cache.

Somehwere else on the page you can have another rollover:

<a href="foobar.htm" onmouseover="win.src=microsoft.src" onmouseout="win.src='xp.gif'"><img src="xp.gif" name="win"></a>

[edited by: tedster at 7:37 pm (utc) on Sep. 17, 2002]

[Nick_W]

Hey, thanks alot Tedster, even I can understand that!

Nick

[madcat]

Nick - if you have trouble validating you may need to change certain parameters...

<img src="xp.gif" name="win">

Should read

<img src="xp.gif" id="win">

[j_h_maccann]

Tedster's code works just fine, of course, and there are two variants which may be convenient.

First, the preload is only needed for the rolled-over versions (since the non-rolled-over versions will be loaded on the page), and the idea is just to get them into the cache--no need to retain them in global variables. So the preload code in the head (or in an external script) can be:

(new Image(167,45)).src='images/helpdownfile.gif';
(new Image(167,45)).src='images/faqdownfile.gif';

and so forth (within <script> tags and comments if placed in the HEAD, not if put in an external script). This gets the alternate GIFs into the browser cache but doesn't bother to keep any record of it.

Second, there's usually no reason to pass the references to the GIFs around in variables, when you can just as easily use their real names and get them from the cache on demand.

<a href="../helppage.htm"
onMouseOver="document.helpkeyimg.src='images/helpdownfile.gif';"
onMouseOut="document.helpkeyimg.src='images/helpupfile.gif';"><img 
name="helpkeyimg" src="images/helpupfile.gif"
alt="Help" border="0" width="167" height="45"></a>
 
<a href="../faqpage.htm"
onMouseOver="document.faqkeyimg.src='images/faqdownfile.gif';"
onMouseOut="document.faqkeyimg.src='images/faqupfile.gif';"><img 
name="faqkeyimg" src="images/faqupfile.gif"
alt="FAQ" border="0" width="167" height="45"></a>

This way you refer to the actual names of the files you want to use (e.g., "helpupfile.gif" or "faqdownfile.gif") on every occasion you mention them, without introducing another layer of naming for the images which can introduce programmer errors. You have to introduce names for the images (e.g., "helpkeyimg" and "faqkeyimg"), so you have a way to refer to them (e.g., "document.helpkey.src").

These models seem to work at least on Netscrap 4.72 (the earliest I test with), IE, and Opera.

[ergophobe]

For images other than rollovers, I think it's best to have them load using the

<body... onload...>

event isn't it? that way you don't start preloading images until you've loaded the ones that are actually needed for the page. For rollovers, of course, it's a drag to navigate if they don't load in quick succession.

Tom

[tedster]

For images other than rollovers, I think it's best to have them load using the <body... onload...>

Of course [smack on the head!] - can't believe I never thought about that. I've been putting the script inline at the end of my HTML - but putting it external and calling it onload is ideal. Thanks.

[Harley_m]

So, would this load up images in other pages of a site so that there downlaod times were much reduced...?

if not how would i do that...? it would make a site run as smoothly as possible surely?

[tedster]

would this load up images in other pages of a site so that there downlaod times were much reduced...?

Yes - I use it regularly in multi-part articles to preload large images for the next page and it works a treat! Anytime you have an idea where the likely next click will go it's a gem for keeping your visitors from getting the back button fidgets.

[Harley_m]

well i would be very interested in using this to deal with a loading problem ive asked about in a new topic, as well as using it to make this site im doing alot slicker. It would be great to have a site load all images on a page, and while the user was reading that homepage, it would preload images one tier down, then two and so on, so when they click on 'products' for example, all the images would appear much quicker than normal.

is it possible to create a tiered system like this, cos i swear i would use it for every site i do, but as i have used only very limited java before, i havnt a clue how to..

any ideas...?

[tedster]

All the information needed is right on this thread - but! loading ALL the images for a tier down may be too much. I'd say just pick the problem images -- the really big boys.

I'm not going to work out exact code for a copy/paste solution, but I'll offer the logic behind it. It will be an valuable exercise for people to work out their own particular details - then they'll know how to fish!

1. Create an external javascript file and call it from the head section of the page.

2. In that external file, define a preload function such as we discuss on this thread - a function that caches images. It will be more scalable to have the function work with the images as variables, rather than using exact image names. Best idea would be to adapt rewboss's idea for using arrays (see the link in message #1)

3. In the body tag, call the preload function onload, passing the file names for the images that you want that page to preload.

This is not advanced code, it's relatively basic. Working out the specifics will require a first serious dig into a basic level of javascript knowledge. If someone plans to use this on many sites, they'll have a valuable asset in knowing how it works instead of doing copy/paste.

[Harley_m]

Tedster, thanks alot, very helpful...

whats the advantage to having the JS in an external file to be called...?

or am i being thick? (go on say it)

[tedster]

whats the advantage to having the JS in an external file to be called...?

The .js file with the function definition is cached. Then on successive pages there is no added download. Also, a smaller file size for the HTML page - every little bit helps.