Pre-Load Images

WiseWizards · #21 Jun 22nd, 2005, 16:24

Thank you so much for your time, effort, and especially patience. I greatly appreciate your help! (I'm taking a JavaScript class this coming semester, so hopefully I'll be more "in-the-know" when it comes to such scripting.

Anyway, I'll try inserting your script soon. I am currently up to my knees in redesigning my business website and creating the Cross Country team's website.

Regards,
Mike

phleet · #22 Jul 20th, 2005, 04:04

Another alternative is to have the entire page only show once EVERYTHING is loaded. You can do this by going like this:

Code: Select all

<html>
<head><title>Image Preload</title>
<script language="javascript">
function loadid() {
    document.getElementById('visiSwitch').style.display="inline";
}
</script>
</head>
<body onLoad="loadid()">
<div id="visiSwitch" style="display:none">
....
ALL CONTENT HERE
...
</div>
</body>
</html>

What this will do, is cause everything contained in the divs tags to be invisible until the page is completely loaded. Once all images are loaded, everything will become visible again. If anything doesn't work, email me at phleet@gmail.com.

Glad to be of service.

WiseWizards · #23 Jul 20th, 2005, 07:09

Thanks for your help! I will insert this code into my webpage, however, my only concern is that users will have to wait to see the webpage. As I'm sure your aware of, this is a highly important variable in good website design. I don't think my webpage would take long to load in the first place, so I will use the code and see what happens. I thank you, though, for your help. If I have questions, I will contact you as you requested.

Regards,
Mike

barrysmith · #24 Jul 20th, 2005, 09:02

I use this script and just rename etc....do not forget to name each rollover....
You will notice here the name is arrow.
This script you can adjust and add as you like.
place this script on your desktop...create a folder called images...create two images called redArrow.gif and blueArrow.gif 147 wd x 86 ht.
Then you can see the script work

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>A Simple Rollover</title>
	<script language="Javascript" type="text/javascript">
	<!-- Hide script from old browsers

	if (document.images) {
		arrowRed = new Image
		arrowBlue = new Image

		arrowRed.src = "images/redArrow.gif"
		arrowBlue.src = "images/blueArrow.gif"
	}
	else {
		arrowRed = ""
		arrowBlue = ""
		document.arrow = ""
	}

	// End hiding script from old browsers -->
	</script>	
</head>
<body bgcolor="#FFFFFF">
	[img]images/blueArrow.gif[/img]
</body>
</html>

Rob · #25 Jul 20th, 2005, 09:34

Quote:

Originally Posted by WiseWizards

This is the 4th script I've tried, so I'm starting to think it's either my computer or my web host.

It wont be your webhost .... it could however be your browser!

WiseWizards · #26 Jul 20th, 2005, 17:28

Thanks to both of you! I think I'll try the latest script, so if I encounter any problems, etc., I'll be sure to contact you. Let's just hope this one works...

About my browser, if is my browser, I can't understand why it would be. I use the lastest IE, have a Windows XP SP2, and all the latest Microsoft Updates have been downloaded. I doubt there are any viruses or the like which may have altered my files, but that's always a possibility I guess. I'll be trying the last script and if that doens't work, then I may have to go further into what's causing me to not view the script's effect properly than actually finding a script that works.

Regards & Thanks,
Mike

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Load Last	fizzgig	JavaScript Forum	5	Sep 20th, 2007 20:07
Getting Div to show on load	pa007	JavaScript Forum	1	Aug 25th, 2007 17:15
Forcing JavaScript to load before images?	JennyChaos	Starting Out	14	Jul 13th, 2007 23:02
How to ensure important images load first?	snappy	Web Page Design	16	Nov 15th, 2006 15:14
HELP!!! Images won't load IE 6	Lilas	Graphics and 3D	1	Dec 23rd, 2005 18:08

		Webforumz.com > Main Forums > Program Your Website > JavaScript Forum
Pre-Load Images