Login | Register   
LinkedIn
Google+
Twitter
RSS Feed
Download our iPhone app
TODAY'S HEADLINES  |   ARTICLE ARCHIVE  |   FORUMS  |   TIP BANK
Browse DevX
Sign up for e-mail newsletters from DevX


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

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:

 
<SCRIPT LANGUAGE="JavaScript">
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";
}
</SCRIPT>
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.

 

 

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