Preload images to hopefully appear instantly. Tested in IE6.0, Netscape8.1, Opera9.0, Firefox1.5.0.4 and AOL Explorer1.2

H ave you ever opened a web page and the images take what it seems forever to load. If you have, you are not alone in this plight.

We have tested the code in IE6.0, Firefox1.5.0.4, Opera9.0, Netscape8.1 and AOL Explorer1.2. This script worked well in all platforms with no variations observed.

T o "Preload" images, you need what is basically called a "Splash" page or preceding page that while the "Splash" page is opening and being viewed, it is also "Preloading" the images on the next page where it will transition or be clicked on. This way when the next page opens all the images are hopefully* loaded and appear instantly.

* This is not a guarantee nor is it written in stone. This is just a script that will hopefully preload the normal size images in a normal period of time before transition occurs or the page is opened.

T his "Preload" script is placed in the <HEAD> section of the "Splash" or preceding page.

image1 = new Image();
image1.src = "Path To Image To Preload";

image2 = new Image();
image2.src = "Path To Image To Preload";

// End -->
</script>

T o add more images to be pre-loaded, just follow the format in the above script and be sure to number in sequence all the images to be preloaded. In other words, for each additional image, you need to add the below part of the script after the second image and before the below closing End tag.
// End -->

image3 = new Image();
image3.src = "Path To Image To Preload";

I n other words if we wanted to add one more image to make it three (3) to the above code which is now set for two (2) images, it would look like the below.

image1 = new Image();
image1.src = "Path To Image To Preload";

image2 = new Image();
image2.src = "Path To Image To Preload";

image3 = new Image();
image3.src = "Path To Image To Preload";

// End -->
</script>

For your Information: Another other little trick in reference to this "Preload" script is to add it on the page you are opening instead of a "Splash" page.

Reason Being:
Pages load from the top down
Since this script is in the <HEAD> section of the document
This section gets loaded first and will send the message to load the images first
Instead of the page waiting for it to get to each individual image

Note Of Importance: When you add the path to the images you are preloading. You "Must" use the complete path to the image for the script to work.

Right Way:
image1 = new Image();
image1.src = "http://www.mydomain.com/myimage.gif";
Wrong Way:
image1 = new Image();
image1.src = "myimage.gif";

T o concrete the explanation, think of you sending a letter to your friend. If you would just put his/her name on the envelope with a stamp;

It would not get there. /myfriend.gif.
By putting the complete address
http://www.mydomain.com/myfriend.gif
The letter can find its way to your friend.

A s you have progressed down this page, all that time has been spent in the background preloading the images on the page that you can reach by grabbing the below link. So in essence, we have used this page as a "Splash" page for the below link. If you would like to view the cource code of this page, feel free. We have the preload script well marked.
[ Open To See Preloading Script In Action ]

If the above button does "Not" work, select "View" (top of browser) then "Source". WindowsXP does not play well with the button and you get the infamous
[ The page cannot be displayed ]

I f you have any problems with this page or with anything else, feel free to consult our [ FAQ ] and if you can't find the answer there, [ contact us ].
[ Rate This Page ]

Search Our Site By Individual letter

[ A ] [ B ] [ C ] [ D ] [ E ] [ F ] [ G ] [ H ] [ I ] [ J-K ] [ L ]
[ M ] [ N-O ] [ P-Q ] [ R ] [ S ] [ T ] [ U-V ] [ W ] [ X-Y-Z ]

Little Tips Directory

[ Page 1 ] [ Page 2 ] [ Page 3 ] [ Page 4 ] [ Page 5 ] [ Page 6 ] [ Page 7 ]

[ Index Page 1 ] [ Index Page 2 ] [ Index Page 3 ] [ Index Page 4 ] [ Index Page 5 ]
[ Index Page 6 ] [ Index Page 7 ] [ Index Page 8 ] [ Index Page 9 ] [ Index Page 10 ]
[ Index Page 11 ] [ Index Page 12 ] [ Index Page 13 ]

[ News Letter Archives ] [ Navigation Page ] [ Archives Of Published Material ]
[ Link To Us ] [ Alphabet Index ] [ Feedback ] [ On Line Support ] [ FAQ ]
[ Webmaster Utilities ] [ Casino ] [ Banner Exchange ] [ Advanced Site Search ]

If you are part of the ever growing number of webmasters who enjoy sharing your knowledge with others on web design, join The Consigliere Ltd. web ring to broaden your scope of exposure.
Join Today

This Site Was Built And Is Maintained Exclusively by
The Webmaster @ Consigliere Ltd.