Browse DevX
Sign up for e-mail newsletters from DevX

Tip of the Day
Language: Web
Expertise: Intermediate
Sep 4, 1998



Building the Right Environment to Support AI, Machine Learning and Deep Learning

Loading Graphics Before You Display Them

Many sites include rollover effects to make images change when the mouse moves over them. However, sometimes there's an unsightly delay while the second graphic is downloaded from the server. You can avoid this delay with some scripting code to make the client's browser to load the second graphic at the same time as the page.

In fact you can pre-load several graphics using the same technique. Here's a JavaScript function to include the header section of your page:

function loader()
preLoad = new Array();
for (i = 0; i < 5; i ++)
	preLoad[i] = new Image();
	preLoad[0].src = "first.gif";
	preLoad[1].src = "second.gif";
	preLoad[2].src = "third.gif";
	preLoad[3].src = "fourth.gif";
	preLoad[4].src = "fifth.gif";
Call it by including ONLOAD="loader()" in the page's <BODY> tag and it will load five graphics into the array preLoad ready for displaying. The code can easily be extended to cope with pre-loading as many graphics as you need.
Martin Kelly
Comment and Contribute






(Maximum characters: 1200). You have 1200 characters left.



Thanks for your registration, follow us on our social networks to keep up-to-date