JavaScript image preloading

Partners:

Threaded Mode | Linear Mode

JavaScript image preloading

Author Message

online.education

Bronze Junior Member

Group: Members
Posts: 38
Joined: Jul 2007
Status: Offline
Reputation: 0
SD$: 39

Post: #1

JavaScript image preloading

One of websites that I'm currently working on displays two JavaScript slide shows. If and when all images are loaded, then the website looks fine, but if not, slide shows look really messy; I need to resolve this problem.

I believe JavaScript image preloading is the solution to this problem, but I already preload images like the following:

Code:

var logoImage = new Array();

for (var i = 0; i < 11; i++)

{

    logoImage[i] = new Image();

}

logoImage[0].src="images/logo.jpg";

logoImage[1].src="images/logo.jpg";

logoImage[2].src="images/logo.jpg";

logoImage[3].src="images/logo.jpg";

logoImage[4].src="images/logo.jpg";

logoImage[5].src="images/logo1.jpg";

logoImage[6].src="images/logo2.jpg";

logoImage[7].src="images/logo3.jpg";

logoImage[8].src="images/logo4.jpg";

logoImage[9].src="images/logo5.jpg";

logoImage[10].src="images/logo6.jpg";

(Yeah, I know, the code looks very messy, but I just want this to work rather than to write an elegant code.)

What am I missing? What can I do to ... get this JavaScript image preloading work ...???

(BTW, the following is the test site: http://www.cre8iveonline.com/jewelry/index.htm )

online.education

04-04-2008 05:18 PM

Brian

Member

Group: Administrators
Posts: 289
Joined: Feb 2006
Status: Offline
Reputation: 0
SD$: 328

Post: #2

RE: JavaScript image preloading

You may want to try doing something like this:

Code:

<html>

<head>

<script language = "JavaScript">

function preloader() 

{

var logoImage = new Array();

for (var i = 0; i < 11; i++)

{

    logoImage[i] = new Image();

}

logoImage[0].src="images/logo.jpg";

logoImage[1].src="images/logo.jpg";

logoImage[2].src="images/logo.jpg";

logoImage[3].src="images/logo.jpg";

logoImage[4].src="images/logo.jpg";

logoImage[5].src="images/logo1.jpg";

logoImage[6].src="images/logo2.jpg";

logoImage[7].src="images/logo3.jpg";

logoImage[8].src="images/logo4.jpg";

logoImage[9].src="images/logo5.jpg";

logoImage[10].src="images/logo6.jpg";

}

</script>

</head>

<body onLoad="javascript:preloader()">

whatever html/javascript code for using the images goes here

</body>

</html>

Now if you really want to get fancy, you can have a little loading window thing that will appear in the center of the screen telling you to please wait while the website loads, and then goes away once it has loaded.

If you would like I can try and expand on what I have to show how to do that. Just let me know.

Brian

04-05-2008 01:40 AM

« Next Oldest | Next Newest »

View a Printable Version
Send this Thread to a Friend
Subscribe to this Thread | Add Thread to Favorites