SourceDevelop
  • Home
  • Learn A Language
  • Articles & Tutorials
  • Forums
  • Other Resources
Visual Basic HTML/CSS PHP/MySQL
PHP MySQL More Resources
index Forums Index Search Search Member List Member List Help Help

  • Search
  • Member List
  • Calendar
  • Help

Welcome Guest ( Login | Register )


Latest News: We share our revenue with our members, click here for more details.
SourceDevelop > Programming and Web Design > HTMS/CSS/Javascript/PHP/MySQL > JavaScript image preloading

Partners:
TV & Dinner MorningStarr RustyWalrus Josechukkiri

Post Reply  Post Thread 
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
Visit this user's website Find all posts by this user Quote this message in a reply
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
Find all posts by this user Quote this message in a reply
« Next Oldest | Next Newest »
Post Reply  Post Thread 

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

Forum Jump:

Contact Us | SourceDevelop | Return to Top | Return to Content | Lite (Archive) Mode | RSS Syndication

Powered By MyBB
Copyright © 2002-2009 MyBB Group