One of the things that can really slow down the display of Web pages is an abundance of images, each one of which can contain the equivalent of 17,000 to 20,000 characters.
There is a trick of Image Preloading to help overcome the delays experienced while image-rich documents load. Through the use of JavaScript, image files are loaded into image objects. The net result is that the graphics are not displayed but are loaded into the browser's cache for later use. When it is time for the browser to actually display the image(s), they are taken from the local cache instead of having to make the trip across the Internet.
The script embedded in the following document is an example of a preload script:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Preloading Images</title>
<script type="text/JavaScript">
// Assign path of images to be preloaded to array, one image per index
var imagenames = [];
imagenames[0] = "images/header.gif";
imagenames[1] = "images/logo.jpg";
imagenames[2] = "images/picture1.gif";
imagenames[3] = "images/picture2.gif";
imagenames[4] = "images/picture3.gif";
imagenames[5] = "images/rule.gif";
imagenames[6] = "images/button01.gif";
imagenames[7] = "images/button02.gif";
imagenames[8] = "images/button03.gif";
imagenames[9] = "images/footer.gif";
imagenames[10] = "images/gradient.gif";
imagenames[11] = "images/sphere.gif";
// Create new image object for each image and then assign a path to the src, preloading the actual image
function preload(imagenames)
{
var images = [];
for (var i=0; i < imagenames.length; i++)
{
images[i] = new Image();
images[i].src = imagenames[i];
}
}
// Run script, preloading images, before document loads (alternately, place call in an onLoad in body tag to preload images after document loads)
preload(imagenames);
</script>
</head>
<body>
<p>Document body goes here.</p>
</body>
</html>
The script builds an array of image paths and then iterates through them, creating an image object and assigning an src property to cause the image to actually be preloaded. The script can be run via two different means: by a function call in the <head>, which causes the script to run before the document loads, or by an onLoad handler in the <body> tag, which causes the script to run after the document loads.
Note: Image preloaders aren't useful for individual documents; they are most useful for sites of multiple documents that reuse the same images over and over (buttons, rules, backgrounds, and so on). When seeding the loader, don't forget to include images from all documents your audience may see.
The former, before the document loads, is handy when the document itself contains many images — running the preloader first can speed the display of the initial document. The latter, after the document loads, is better chosen when subsequent documents are the documents with the majority of images. This allows the initial document to load more quickly because it doesn't have to wait for the script to run — the document is displayed for the user to peruse while the script runs in the background.
The former, before the document loads, is handy when the document itself contains many images — running the preloader first can speed the display of the initial document. The latter, after the document loads, is better chosen when subsequent documents are the documents with the majority of images. This allows the initial document to load more quickly because it doesn't have to wait for the script to run — the document is displayed for the user to peruse while the script runs in the background.
No comments:
Post a Comment