View Full Version : Preload image script issues for a newbie!

12-10-2009, 06:17 PM
Hello All! Brand new to Javascript here, so please forgive my basic question. I did a search but did not find exactly what I was looking for.

My web site has a splash page with a large image broken into pieces and displayed in a table. I want to preload the images so the user doesn't see the table slowly "fill in" when using a slower internet connection.

I have written a basic script, using the basic format of:


Image1= new Image(50,60)
Image1.src = "something.gif"

Image2 = new Image(70,80)
Image2.src = "somethingelse"

Image3 = new Image(90,100)
Image3.src = "lastsomething.gif"


and saved it as a .js file and placed it in my sites root directory. Just to be safe, I've placed the images there too. (do I have to do that though?)

Still, it does not seem to be working. Below is the head from my splash page. Have I missed somthing here? I thought that by putting the script reference in the head, the images would be loaded before the table came up, but such does not seem to be the case. Any help would be most appreciated. Thanks!

<title>Finish Well Endurance</title>
<meta name="generator" content="Namo WebEditor">
<link type="text/css" rel="stylesheet" href="http://www.fwe1.net/css/index.css">
<script type="text/javascript"language="javascript"src="loadimages.js"></script>

<body bgcolor="#464646" text="black" link="#464646" vlink="#464646" alink="#464646">
<table border="0" align="center" cellpadding="0" cellspacing="0" width="600">

12-10-2009, 07:06 PM
If the script is in a JS file, you don't need <script> tags.

12-10-2009, 07:19 PM
Are you saying that the body of the javascript file itself should look like this then?

Image1= new Image(50,60)
Image1.src = "something.gif"

Image2 = new Image(70,80)
Image2.src = "somethingelse"

Image3 = new Image(90,100)
Image3.src = "lastsomething.gif"

I'll give that a try. Thanks for the tip.

By the way, I've heard than some systems block scripts, and if so the actual language will display on screen. Isn't there a way to hide that if the browser doesn't do scripts?

12-10-2009, 07:30 PM

Browsers only show the plain text source of scripts if they don't know what the script tags are; not if scripts are disabled.

Some people wrap their javascript in HTML comments to ensure against this, but it's really not necessary nowadays, and should be avoided.

Philip M
12-10-2009, 07:36 PM
The external .js file must not contain any HTML tags such as <script>.

Scripts may be disabled by the user, but this is uncommon outside corporate environments. In that case they simply do not work.

Long ago some browsers rendered the actual script unless it was wrapped in HTML hiding tags. The <!-- and //--> comment (hiding) tags have not been necessary since IE3 and should not be used.

<script language=javascript> is also long deprecated and obsolete. Use <script type = "text/javascript"> instead.

NB Gusblake beat me to it! :)

12-10-2009, 08:17 PM
Thanks again, both of you! So, just to be sure I follow 100%:

No html in the script file itself, just the image=new image and scr lines.
Load the images into and the .js in the rood directory along with the index file.
Delete the script language reference from my html file to make it read like this:

<script type="text/javascript"src="loadimages.js"></script>

Does that sound right?

12-10-2009, 09:37 PM
Yeah that should be OK.

12-11-2009, 06:01 AM
Hmmm. I pulled up the script file tonight and it turns out I did not use any html tags, so I guess that wasn't the issue. I did erase the language="javascript" part but still no go.

You can see what it is doing here:


Any other thoughts?

Philip M
12-11-2009, 08:33 AM
In IE:

Line2 Char 1
image is undefined

12-11-2009, 06:13 PM
Should be Image (JS is case sensitive)

Edit - I also noticed another typo, scr instead of src

12-11-2009, 07:55 PM
Rats! totally missed the typo - guess that could be it right there. I'll double check the image paths, thought I had those down though. Thanks again all, I hope to get better at this so at least I can avoid the obvious mistakes. I'll check it all this evening and report back.

12-12-2009, 06:32 AM
Thanks for catching those things. Image with a capital "I" corrected. src corrected. I thought that would do it, but still no success. To keep things as simple as possible, I have put the script and the images back in the root directory. Now my javascript looks something like this:

logo1=new Image(150,100)
logo2=new Image(150,100)

Do I need spaces in these lines, like before and after the equals?

What else could I be missing?

12-14-2009, 11:22 PM
Anyone have any other thoughts on this one?

12-14-2009, 11:50 PM
The code is OK but you need some way of making the page wait until the images are all cached before it carries on loading. To be honest I am not sure how to do this. That way of caching images is usually used for rollovers - the images are loaded into cache in the background, and are ready (as long as the user isn't too eager to navigate around the site) for when the mouse rolls over the link.

But the script doesn't pause the execution of the page, which is what you want.

Maybe you could make a hidden layer in the HTML, above the visible code, which calls all the images. Then they'll be in the cache when they are called further down, on your actual page.

12-15-2009, 06:14 PM
Oh! I didn't realize that, this is making more sense to me now. I thought the images werent' loading, but it sounds like they are, it's just that the table is loading too quickly.

Crazy question, but let me ask this - is there a way to make a page with a link that automatically acitvates? In other words, if I made a new index page that only contained a black background, the script to pre-load the images, and a link (say something like "loading..."), is it possible to have that link automatically engage once the image load is complete and take you to the true splash page? Probably not an elegant solution, but could that work?

12-15-2009, 06:20 PM
It's not possible to manually invoke a click event, but you could do a simple redirect with:


And include a link to skip it for people with slow connections.

I'm still not sure how you would find out whether the images are loaded though, unless you did a hidden layer like I mentioned, and simply put the redirect script below the images in the HTML code.

But as you said, not a very elegant solution...

12-15-2009, 06:24 PM
Perhaps I could just place this in the HEAD section of the "new" index?

<meta http-equiv="refresh" content="4; URL=http://www.fwe1.net/splash.htm">

Of course, since I don't want IE to display any information other than "www.fwe1.net" I'll need to figure out how to mask the domain as the link activates and sends me to the splash screen...