|
 |
|
 |
|
This is the second tutorial I've written, and concerns making a web browser preload images that might be needed on different pages. If you have large images that grace multiple pages, or a very important image/imagemap that's fairly large, it's a good idea to preload that image on another page for those people using dialup. That's where this tutorial comes in.
In some cases, you may need to preload images. In a previous incarnation of this website, for instance, I had a menu that used javascript to switch out the button graphics if you moused over them. However, without doing any preloading, you would have to mouse over the button, the image would download, and only then would you see the alternate button. For people on broadband, the download takes no time at all, so it's not noticeable. However, dialup users may have to wait a couple seconds, and a couple seconds is longer than most people will hover over a button before clicking it. Thus, for dialup users, a preload is necessary in situations like this. At one point I also had a very large imagemap I used as the primary navigation, with more mouseovers to make that interesting. Without preloaders, even broadband users would have to wait.
There are several ways to preload images, but the most effective way is also the easiest. Simply include those images in your html with a height and width of 1 pixel apiece. This forces the browser to download the picture, but due to the size most people wouldn't notice them at all. As an example;
<img src="blah.jpg" border=0 height=1 width=1>
And that's basically all that's to it. Just put a series of these, with your different images, at the bottom of your index page, or in your navigation frame or something. The browser takes care of the rest. Once those images are downloaded, another call for that image by your web page (at actual size) will cause the browser to pull it out of it's cache instead of redownloading it. For really large images, this is great even if you have a broadband internet connection, but primarily this technique is for dialup users.
What other ways are there to precache images, you ask? Well, I'll go ahead an paste a couple javascripts in here to show you, but as these were rustled up from around the web (from where exactly I don't recall) and not created by me, I won't go into explaining how they work. Besides which, I don't know javascript.
<!-- TWO STEPS TO INSTALL PRELOAD IMAGES:
1. Copy the coding into the HEAD of your HTML document
2. You can use the preload script with the "Change Image" script at
http://miscellaneous.javascriptsource.com/change-image.html --%gt;
<!-- STEP ONE: Paste this code into the HEAD of your HTML document -->
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->
<!-- Begin
image1 = new Image();
image1.src = "image1.gif";
image2 = new Image();
image2.src = "image2.gif";
// End -->
</script>
<p><center>
<font face="arial, helvetica" size="-2">Free JavaScripts provided<br>
by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
</center><p>
<!-- Script Size: 0.54 KB -->
That's the first way. Here's another script.
<!-- THREE STEPS TO INSTALL PRELOAD PAGE:
1. Copy the coding into the HEAD of your HTML document
2. Add the onLoad event handler into the BODY tag
3. Put the last coding into the BODY of your HTML document -->
<!-- STEP ONE: Paste this code into the HEAD of your HTML document -->
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- Original: Gilbert Davis -->
<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->
<!-- Begin
function loadImages() {
if (document.layers) {
document.hidepage.visibility = 'hidden';
}
else {
document.all.hidepage.style.visibility = 'hidden';
}
}
// End -->
</script>
</HEAD>
<!-- STEP TWO: Insert the onLoad event handler into your BODY tag -->
<BODY OnLoad="loadImages()">
<!-- STEP THREE: Copy this code into the BODY of your HTML document -->
<div id="hidepage" style="position: absolute; left:5px; top:5px; background-color: #FFFFCC; layer-background-color: #FFFFCC; height: 100%; width: 100%;">
<table width=100%&;gt<tr><td>Page loading ... Please wait.</td></tr></table></div>
<!-- put the rest of your page contents here -->
<p><center>
<font face="arial, helvetica" size="-2">Free JavaScripts provided<br>
by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
</center><p>
<!-- Script Size: 1.20 KB -->
And finally, here's a final way to do it. This requires javascript again, but it's nowhere near as complex as the previous two examples.
insert the following code into your header;
var1 = new Image();
var1.src = "image1.jpg";
Repeat that as often as necessary, changing the var1 and var1.src for every different image. You can use any variable string you want (eg, var1, var2, var3, etc etc). Of course, replace "image1.jpg" with whatever your images are, but that should be self-evident.
Of all these methods, I prefer the very first because it works with basically any browser, it's not code intensive, and it WORKS. You can play with the other javascripts as you see fit...I remember having some issues getting some of those to work before I settled on that first way of doing things. However, different people like different things, so I decided to go ahead and include every way of doing it that I could find. As should be obvious, most of these javascripts were commandeered from javascriptsource.com so you might want to pay them a visit if you have further needs. And that concludes my second tutorial.
Back to the Technical Guides
|
| |
 |
|
 |
|