PRELOAD IMAGES SO HOME PAGE IS FULLY LOADED ON FIRST VISIT.

What's the best way to preload website images with javascript so when a person goes to it for the first time, it appears all at once and doesn't do the traditional loading in peices.  I like how flash can do this very well but I also would like to acheive this in html as well.  500 points to the expert with a full example that loads multiple images before the webpage is displayed.
madasczikAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

CodescripterCommented:
madasczik, here's one way...

<html><head><title>preload</title>

<script language="JavaScript"><!--

var imgs = new Array();

imgs[0] = new Image();
imgs[0].src="http://www.scld.org/images/catalog_glow.gif";
imgs[1] = new Image();
imgs[1].src="http://www.scld.org/images/calendar_glow.gif";
imgs[2] = new Image();
imgs[2].src="http://www.scld.org/images/site-search_glow.gif";
imgs[3] = new Image();
imgs[3].src="http://www.scld.org/images/contact-us_glow.gif";
imgs[4] = new Image();
imgs[4].src="http://www.scld.org/images/catalog_glow.gif";
imgs[5] = new Image();
imgs[5].src="http://www.scld.org/images/calendar_glow.gif";
imgs[6] = new Image();
imgs[6].src="http://www.scld.org/images/site-search_glow.gif";
imgs[7] = new Image();
imgs[7].src="http://www.scld.org/images/contact-us_glow.gif";
imgs[8] = new Image();
imgs[8].src="http://www.scld.org/images/catalog_glow.gif";
imgs[9] = new Image();
imgs[9].src="http://www.scld.org/images/calendar_glow.gif";
imgs[10] = new Image();
imgs[10].src="http://www.scld.org/images/site-search_glow.gif";
imgs[11] = new Image();
imgs[11].src="http://www.scld.org/images/contact-us_glow.gif";
imgs[12] = new Image();
imgs[12].src="http://www.scld.org/images/catalog_glow.gif";
imgs[13] = new Image();
imgs[13].src="http://www.scld.org/images/calendar_glow.gif";
imgs[14] = new Image();
imgs[14].src="http://www.scld.org/images/site-search_glow.gif";
imgs[15] = new Image();
imgs[15].src="http://www.scld.org/images/contact-us_glow.gif";

function SetImages(strName) {
  for (i=0; i<imgs.length; i++) {
    document[strName + i].src = imgs[i].src;
  }
}

//--></script>

</head>

<body onload="SetImages('pimg')">

<table>
<tr>
  <td><img name="pimg0" src="http://www.scld.org/images/transparent.gif" width="113" height="36"></td>
  <td><img name="pimg1" src="http://www.scld.org/images/transparent.gif" width="122" height="36"></td>
  <td><img name="pimg2" src="http://www.scld.org/images/transparent.gif" width="126" height="36"></td>
  <td><img name="pimg3" src="http://www.scld.org/images/transparent.gif" width="114" height="36"></td>
</tr>
<tr>
  <td><img name="pimg4" src="http://www.scld.org/images/transparent.gif" width="113" height="36"></td>
  <td><img name="pimg5" src="http://www.scld.org/images/transparent.gif" width="122" height="36"></td>
  <td><img name="pimg6" src="http://www.scld.org/images/transparent.gif" width="126" height="36"></td>
  <td><img name="pimg7" src="http://www.scld.org/images/transparent.gif" width="114" height="36"></td>
</tr>
<tr>
  <td><img name="pimg8" src="http://www.scld.org/images/transparent.gif" width="113" height="36"></td>
  <td><img name="pimg9" src="http://www.scld.org/images/transparent.gif" width="122" height="36"></td>
  <td><img name="pimg10" src="http://www.scld.org/images/transparent.gif" width="126" height="36"></td>
  <td><img name="pimg11" src="http://www.scld.org/images/transparent.gif" width="114" height="36"></td>
</tr>
<tr>
  <td><img name="pimg12" src="http://www.scld.org/images/transparent.gif" width="113" height="36"></td>
  <td><img name="pimg13" src="http://www.scld.org/images/transparent.gif" width="122" height="36"></td>
  <td><img name="pimg14" src="http://www.scld.org/images/transparent.gif" width="126" height="36"></td>
  <td><img name="pimg15" src="http://www.scld.org/images/transparent.gif" width="114" height="36"></td>
</tr>
</table>
</body></html>
0
Michel PlungjanIT ExpertCommented:
If you loop anyway, why not loop ALL???

var imgs = new Array('catalog_glow.gif',
'calendar_glow.gif',
'site-search_glow.gif',
'contact-us_glow.gif',
.
.
.
);
imgSrc=new Array();
for (i=0; i<imgs.length; i++) {
  imgSrc[i] = new Image()
  imgSrc[i].src= imgs[i]
}

0
CodescripterCommented:
You should be fully aware, however, that there is a problem (bug) with image caching in Internet Explorer 6...
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

CodescripterCommented:
That's a nice idea, mplungjan.  That makes it more modular.
0
sybeCommented:
put everything in a hidden div, and then revela the div onLoad:


<html>
<head>
</head>
<body onLoad="document.geteElementById('content').style.display='block';">
<div id="content" style="display:none;">
your HTML code here
</div>
</html>
0
CodescripterCommented:
sybe, very eloquent!  This also lends to the idea of a second (initially visible) div that says, "Loading..."
0
ZontarCommented:
I have a tendency to hit the Back button when a page doesn't show me something interesting and/or useful within about 10 seconds. My time is valuable.

And I am not the only one who feels this way. Studies show that this is the norm. (Seeing nothing but "Loading..." for 90 seconds does not count. I would rather at least be able to read some text and get an idea of the look of the site, even if I have to wait  few moments to see the entire thing. Again, this is the norm.)

There is no good reason to interfere with with what users will perceive as the normal loading process. The traditional loading is just that -- traditional, and it's what people are used to.

Also, Codescripter is correct about MSIE 6.0's image-caching issues.

Elegant solutions notwithstanding, I would never implement a scheme such as this on any of my sites.
0
Michel PlungjanIT ExpertCommented:
I think the first one could be valid
Load the page with textual contents, then preload the images and then change all images at once
That would need only a change to the preload to also be done onLoad

Michel
0
JakobACommented:
I would like to express agreement with Zontar.

It is only green newbees who sit with bated breath marveling at the High.tek of it all, that will wait for more than 10-20 seconds. The reast of us just say 'crapsite' under our breath and go elsewhere.

regards JakobA
0
Michel PlungjanIT ExpertCommented:
Hmm, sort of like EE with their 60 corner gifs per page ;)
0
madasczikAuthor Commented:
I'm not loading a crazy amount of images, less than 30Kb total, so no more than 6 seconds for a 56Kb user, and pretty much instant for broadband. Even with broadband, you still see peices loading in, I'm sorry but I can't stand this.  One of the reasons why this happens mostly for me is because of the cold fusion 5 server that it runs off, my boss said it only passes 4 images at a time, so I here.   I feel that if I see slices loading in, it takes away from the overall feel of the website, like its not effiecient enough.  Basically if it takes a second to do it on a broadband connection, that's fine with me.  I just want the person to hit the site for the first time, have the javascript halt the site until the 30kb of images are loading and have the text and those images appear to them 100% loaded.
0
ZontarCommented:
>  Hmm, sort of like EE with their 60 corner gifs per page ;)

Yeah, that's why I disabled image loading from any *.experts-exchange.com domain. ;-)

(Now if they'd do something about all those nested tables and the lack of any alt or title text! I solved the problem of no alt text for submit button images with a bookmarklet -- javascript:function fixXX(){var inputs=document.getElementsByTagName("input");for(i=0;i<inputs.length;i+){inputs[i].style.border="5px solid blue";}} void(fixXX());
)

>  I feel that if I see slices loading in, it takes away from the overall feel of the website, like its not effiecient enough.

But every other site on the Net does the same thing.

>  my boss said it only passes 4 images at a time

Eh? Sounds like that's a server configuration issue that ought to be fixed, then.
0
GwynforWebCommented:
You could also think of preloading half the images and display them and then get the other less important half

<img><img ><img ><img ><img ><img ><img ><img>
<script>
ImSrc= new Array("http://www.scld.org/images/catalog_glow.gif",
"http://www.scld.org/images/calendar_glow.gif",
"http://www.scld.org/images/site-search_glow.gif",  
"http://www.scld.org/images/contact-us_glow.gif",
"http://www.scld.org/images/catalog_glow.gif",
"http://www.scld.org/images/calendar_glow.gif",
"http://www.scld.org/images/site-search_glow.gif",
"http://www.scld.org/images/contact-us_glow.gif")

ImArray= new Array()

//preload and display fist half
for (i=0; i<=3;i++)
{ ImArray[i]= new Image()
ImArray[i].src=ImSrc[i]}

for (i=0; i<=3;i++)
{ document.images[i].src=ImSrc[i] }

//preload and display second half
for (i=4; i<=ImSrc.length-1;i++)
{ ImArray[i]= new Image()
ImArray[i].src=ImSrc[i]}

for (i=4; i<=ImSrc.length-1;i++)
{ document.images[i].src=ImSrc[i] }
</script>
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
CodescripterCommented:
madasczik, I believe your question asked for a full working example, which I gave to you...
it looks to me like GwynforWeb took mplungjan's and my code together, made one small tweak, and did not give you the full example you asked for.  Why is she getting the full 500 points?
0
rseymour1Commented:
Help!!!

I tried the above and it errors out with :

Error: document[strName + i] has no properties

Any ideas what I am doing wrong?

Here is my version:

<script language="JavaScript"><!--

var imgs = new Array();
 
imgs[0] = new Image();
imgs[0].src= 'year';
imgs[1] = new Image();
imgs[1].src="dujour_title.png";
imgs[2] = new Image();
imgs[2].src="dujour_text.png";


function SetImages(strName) {
  for (i=0; i<imgs.length; i++) {
    document[strName + i].src = imgs[i].src;
  }
}
//-->
</script>

Thanks!

Robert
rseymour@dujour.ws
0
Michel PlungjanIT ExpertCommented:
What is strName?

Show the part that calls the SetImage
Also
imgs[0].src= 'year';
does not look like an image to me
0
rseymour1Commented:
Michel:

I am a newbie at JavaScript. Am I missing something?

I modified the Codescripter's script above.

Here is a (simplified) version.

<script language="JavaScript"><!--

var imgs = new Array();
 
imgs[0] = new Image();
imgs[0].src="dujour_title.png";
imgs[1] = new Image();
imgs[1].src="dujour_text.png";


function SetImages(strName) {
  for (i=0; i<imgs.length; i++) {
    document[strName + i].src = imgs[i].src;
  }
}
//-->
</script>


Thanks!
Robert
<body onload="SetImages('pimg')">
0
Michel PlungjanIT ExpertCommented:
If you have
<img name="pimg0" src="blank.gif">
<img name="pimg1" src="blank.gif">
on your page, the script should work
0
rseymour1Commented:
Thanks! It works!
I even added more images to the array.

but ......

I am doing 2 things. I have a script that grabs the cartoon for the current day and uploads it to the home page.

Visitors complained that the site was too slow, soooooooo.....
I decided to preload the images.

The error message was from the main cartoon which is dynamic. When I take it out of the preload script, no errors.

If I try to add it without the (name =pimg info) in the <img> tag I get the error.

If I try to add the "name =pimg...." info in the <img> tag JavaScript blows up.

Below is what I am trying to do now.

Any ideas how to do both?

Thanks again!
Robert

<script language="JavaScript"><!--

var imgs = new Array();

test = new Date()
  var d=new Date()
  var monthname=new Array
("January","February","March","April","May","June","July","August","September","October","November","December")
  month = test.getMonth()
  month = (month * 1) + 1
  day = test.getDate()
  if (day < 10) {day = "0" + day;}
  if (month < 10) {month = "0" + month;}
  year = test.getFullYear()
  year1 = monthname[d.getMonth()] + " " + day + " " + year
  year = "/images/"+year + month + day +".png"

//-->
</script>

<script language="JavaScript"><!--

var imgs = new Array();
 
imgs[0] = new Image();
imgs[0].src="dujour_title.png";
imgs[1] = new Image();
imgs[1].src="dujour_text.png";
imgs[2] = new Image();
imgs[2].src='year';                               #this is what causes the error
imgs[3] = new Image();
imgs[3].src="/images/award.gif";
imgs[4] = new Image();
imgs[4].src="1gazaward.gif";
imgs[5] = new Image();
imgs[5].src="/images/Links3.GIF";


function SetImages(strName) {
  for (i=0; i<imgs.length; i++) {
    document[strName + i].src = imgs[i].src;
  }
}
//-->
</script>


<body onload="SetImages('pimg')">

#####This is the dynamic part that loads the current days cartoon on http://dujour.ws/index.html

<script>
document.write("<img src="+year+" alt =DuJour Cartoon>")  #errors out with name="pimg2"
</script>


0
Michel PlungjanIT ExpertCommented:
imgs[2].src='year'; // load the litaral string "year"
you want
imgs[2].src=year; // load what the VARIABLE year is set to

and you can loose the

//-->
</script>
<script language="JavaScript"><!--

between the scripts
0
rseymour1Commented:
Thanks!
What about :

<script>
document.write("<img src="+year+" alt =DuJour Cartoon>")
</script>

What do I add here?

W/o something here I still get the Error: document[strName + i] has no properties error

(I'm doing all this testing on http://dujour.ws/index2.html.)

Robert
0
Michel PlungjanIT ExpertCommented:

document.write('<img src="'+year+'" alt="DuJour Cartoon">')

but you NEED 6 images on the page named
pimg0 to pimg5
0
rseymour1Commented:
Thanks for spening so much time with me on this.

I made the changes on dujour.ws/index.html
I have :

<script language="JavaScript"><!--

test = new Date()
  var d=new Date()
  var monthname=new Array
("January","February","March","April","May","June","July","August","September","October","November","December")
  month = test.getMonth()
  month = (month * 1) + 1
  day = test.getDate()
  if (day < 10) {day = "0" + day;}
  if (month < 10) {month = "0" + month;}
  year = test.getFullYear()
  year1 = monthname[d.getMonth()] + " " + day + " " + year
  year = "/images/"+year + month + day +".png"


var imgs = new Array();
 
imgs[0] = new Image();
imgs[0].src="dujour_title.png";
imgs[1] = new Image();
imgs[1].src="dujour_text.png";
imgs[2] = new Image();
imgs[2].src="/images/award.gif";
imgs[3] = new Image();
imgs[3].src="1gazaward.gif";
imgs[4] = new Image();
imgs[4].src="/images/Links3.GIF";
imgs[5] = new Image();
imgs[5].src = year;

function SetImages(strName) {
  for (i=0; i<imgs.length; i++) {
    document[strName + i].src = imgs[i].src;
  }
}
//-->
</script>

<body onload="SetImages('pimg')">

<script>
document.write('<img src="'+year+'" alt="DuJour Cartoon">')
</script>

I get the error again when I add:

imgs[5] = new Image();
imgs[5].src = year;
 to the array.

How does JavaScript know about imgs[5] and it being related to year?

The dynamic image still loads slowly (56.6 modem).

Sorry to take so much of your time.

Robert
0
Michel PlungjanIT ExpertCommented:
Post the complete html

what error do you get???
0
rseymour1Commented:
Michel:

Thanks for the reply:

The page is my home page at http://dujour.ws/index.html.

The error is:
Error: document[strName + i] has no properties
Source File: http://dujour.ws/
Line: 43

Here is HTML code.

Thanks again for taking your time.

Robert

<html>
<head>
<title>DuJour.ws - Topical cartoons with Harold and his friends.</title>
<meta name="description" content="The Official DuJour Cartoon Website featuring Robert Seymour's topical cartoon with Harold and his cartoon friends.">
<meta name="keywords" content="DuJour, cartoon, comic strip, cartoon strip, humor, funny, entertainment, home, medical ,biblical, christian, biblical, family, work, cartoon t-shirt, coffee mug">
<meta HTTP-EQUIV="Pragma" CONTENT="no-cache">

<script language="JavaScript"><!--

test = new Date()
  var d=new Date()
  var monthname=new Array
("January","February","March","April","May","June","July","August","September","October","November","December")
  month = test.getMonth()
  month = (month * 1) + 1
  day = test.getDate()
  if (day < 10) {day = "0" + day;}
  if (month < 10) {month = "0" + month;}
  year = test.getFullYear()
  year1 = monthname[d.getMonth()] + " " + day + " " + year
  year = "/images/"+year + month + day +".png"


var imgs = new Array();
 
imgs[0] = new Image();
imgs[0].src="dujour_title.png";
imgs[1] = new Image();
imgs[1].src="dujour_text.png";
imgs[2] = new Image();
imgs[2].src="/images/award.gif";
imgs[3] = new Image();
imgs[3].src="1gazaward.gif";
imgs[4] = new Image();
imgs[4].src="/images/Links3.GIF";
imgs[5] = new Image();
imgs[5].src = year;

function SetImages(strName) {
  for (i=0; i<imgs.length; i++) {
    document[strName + i].src = imgs[i].src;
  }
}
//-->
</script>

<script>

function go()
               {
                       box = document.forms[0].navi;
                       destination = box.options[box.selectedIndex].value;
                       if (destination) location.href = destination;
               }
</script>

<script>

function go1()
               {
                       box = document.forms[1].navi;
                       destination = box.options[box.selectedIndex].value;
                       if (destination) location.href = destination;
               }

</script>


<script language="JavaScript">
<!-- Begin
function firstWindow() {
ElementWindow = window.open('/cgi/date.pl','FirstWin','width=300,height=185')
}
// End -->
</script>

</head>
<body onload="SetImages('pimg')">
<center><h1><img name="pimg0" src="dujour_title.png" alt="DuJour cartoons"></h1></center>
<center><h2><img name="pimg1" src="dujour_text.png" alt="Topical cartoon humor with Harold and his friends"></h2></center>
<center><table border="0">
<tr>
<td valign="bottom">
  <form>  
  <select name="navi" onChange="go()">
      <option value=""><b>Archives</b>

      <option value="javascript:firstWindow()">Last 30 Days
      <option value="http://dujour.ws/biblical.html">Biblical
      <option value="http://dujour.ws/general.html">General
      <option value="http://dujour.ws/homes.html">Home
      <option value="http://dujour.ws/legal.html">Legal
      <option value="http://dujour.ws/medical.html">Medical
      <option value="http://dujour.ws/seasons.html">Seasons
      <option value="http://dujour.ws/signs.html">Signs
      <option value="http://dujour.ws/sports.html">Sports
      <option value="http://dujour.ws/work.html">Work      
  </select>
  </form>
</td>
<td valign =" middle" align="center">
<font face ="sans-serif" color ="navy"> | <a href="http://www.cafeshops.com/dujour"><img src="http://storetn.cafepress.com/6/6567136_F_store.jpg" height="55" align="center" border="0"></a>Shop |</font>

</td>
<td valign="bottom">
  <form>  
  <select name="navi" onChange="go1()">
      <option value="">Visit
      <option value="http://dujour.ws/links.html">Places
      <option value="http://dujour.ws/links/family.html">-Family
      <option value="http://dujour.ws/links/friends.html">-Friends
      <option value="http://dujour.ws/links/humor.html">-Humor
      <option value="http://dujour.ws/links/humor_christian.html">--Christian
      <option value="http://dujour.ws/links/humor_general_a_h.html">--General A-H
      <option value="http://dujour.ws/links/humor_general_i_z.html">--General I-Z
      <option value="http://dujour.ws/links/humor_legal.html">--Legal
      <option value="http://dujour.ws/links/humor_medical.html">--Medical
      <option value="http://dujour.ws/links/humor_work.html">--Work
      <option value="http://dujour.ws/links/resources.html">-Resources
      <option value="http://dujour.ws/links/stores.html">-Stores    
  </select>

  </form></td>
<td valign =" middle"><img src="new.gif"></td>
<td valign =" middle"><font face ="sans-serif" color ="navy">
<a href="http://dujour.ws/sitemap.html">Site Map</a></td>
<td valign =" middle"><img src="new.gif"></td>
</tr>
</table>
<img src=" dot.gif" alt=" line" width = 100%  height =" 1">
<br />
<center>
<script>
document.write('<img src="'+year+'" alt="DuJour Cartoon">')
</script>
<br /><br />
</center>
<center><font face ="sans-serif" color ="darkred"size="+1">A new cartoon every week day</a>

<br>
<font color="navy" face="Arial">          
<script>

// (C) 2000 www.CodeLifter.com
// http://www.codelifter.com
// Free for all users, but leave in this  header

// message to show in non-IE browsers
var txt = "Bookmark DuJour!"

// url you wish to have bookmarked
var url = "http://dujour.ws";

// caption to appear with bookmark
var who = "DuJour"

// do not edit below this line
// ===========================

var ver = navigator.appName
var num = parseInt(navigator.appVersion)
if ((ver == "Microsoft Internet Explorer")&&(num >= 4)) {
   document.write('<A HREF="javascript:window.external.AddFavorite(url,who);" ');
   document.write('onMouseOver=" window.status=')
   document.write("txt; return true ")
   document.write('"onMouseOut=" window.status=')
   document.write("' '; return true ")
   document.write('">'+ txt + '</a>')
}else{
   txt += "  (Ctrl+D)"
   document.write(txt)
}
</script>
</font>
</center>
<br>
<table border="0" width ="80%">
<tr>
<td valign =" top" align="left" colspan="2">
<font face ="sans-serif" color ="navy">
<ul>
<li><a href="http://www.cafeshops.com/dujour"><b>Get</b></a> this cartoon on a T-shirt, mug or other stuff.<br/><br /></li>
<li><b>Get</b> each weekday topical cartoon on your wireless <b>PDA</b>.

<br />Bookmark <a href="http://dujour.ws/cgi/index.png">http://dujour.ws/cgi/index.png</a> on your PDA browser.
<br /> Best viewed with <a href="https://my.avantgo.com/home/index.html?referer=http%3A%2F%2Favantgo.com%2Ffrontdoor%2Findex.html">AvantGo.</a><br/><br /></li>
<li>Got a cartoon topic? Suggestions? <a href="mailto:rseymour@dujour.ws"><b>Contact us</b>.</a></li>
<li><a href="mailto:?subject=Have you seen today's DuJour cartoon http://dujour.ws"><b>Email</b></a> a friend!</li>
<li><a href="http://dujour.ws/cgi/vote.pl"><b>Vote</b></a> for your favorite DuJour cartoon!</li>

<li><a href="http://dujour.ws/cgi/yabb/YaBB.cgi"><b>Post</b></a> your cartooning thoughts on the DuJour Discussion Board</li>
<br/><br />
<li><b>Info - </b><a href="http://dujour.ws/characters.html">Who</a>, <a href="http://dujour.ws/whatwhenwhere.html">What, When, Where</a>, <a href="http://dujour.ws/els.html">Why</a>, and <a href="http://dujour.ws/how.html">How</a>.</li> <img src="/images/new.gif">
</ul>

</td>
</tr>
</table>
</center>
<center>
<table width =" 100%">
<tr>
<td width =" 97%"><img src=" dot.gif" alt=" line" width = 100%  height = 1></td>
<td align="right"><img src="perl.gif" align="bottom" usemap="#home" border=0 alt =" link to mailto">
<map name="home"><area shape=rect coords="0,0 19,20" alt =" mailto" href="mailto:rseymour@dujour.ws">
</map>
</td>
</tr>
</table>
</center>
<center>
<table>

<tr>
<td><font face ="sans-serif" color ="navy" size="-1">Dedicated to  <a href="els.html">Esther L. Seymour</a> |  &copy; Copyright 2004 |
<script type="text/javascript">
document.write(year1)
</script>
</td>
</tr>
</table>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<center>
<table border="0" width ="60%">
<tr>
<td align =" right" valign="bottom">
<a href="http://www.pointoflife.com" target="_blank">
<img name="pimg2" src="/images/award.gif" alt="Point of Life.com Award" width="114" height="140" border="0"></a>
</td>
<td align="left" valign="bottom"><a href="http://www.gadzillionthings.net"><img name="pimg3" border="0" src ="1gazaward.gif"></a>
</td>
<td align ="left" valign="bottom">
<!-- Christian Top 1000 code starts here -->
<a HREF="http://www.christiantop1000.com/cgi-bin/1000/show.cgi?id=rseymour" target=_blank>
<img SRC="http://www.christiantop1000.com/cgi-bin/1000/counter.cgi?id=rseymour" BORDER=0></a>
<!-- Christian Top 1000 code ends here -->
<a href="http://home.christianity.com">

<img  src="http://directory.christianity.com/link4link.cgi?id=118821"  border="0" width="130" height="40" alt="Visit Christianity.com!"/>
<span style="font-face:verdana;font-size:12px;">
Visit Christianity.com</span></a></td>
<td align="left" valign="bottom"><a href="http://www.familyfriendlysites.com/FamilyFriendly/default.asp?nID=30794"><img SRC="/images/familyfriendly88x31.gif" border="0"></a></td>
</td>
</tr>
<tr>
<td align ="right" valign="top" colspan="2">
<a href="http://www.cartoonsforum.com/Linkies/AddSurf.html">
<img name="pimg4" border=0 width="123" height="31" alt="Linkies Cartoon Surf List"
src="/images/Links3.GIF" align="right"></a>
<embed src="http://www.cartoonsforum.com:591/Links/FMPro?-DB=Linkies.fp4&-Format=Art/Links3.GIF&-RecID=33823&-Script=hits&-Find=Find"
WIDTH=0 HEIGHT=0></embed><clear=all>
<font face ="sans-serif" color ="navy"><a HREF="http://www.topsitelists.com/topsites.cgi?ID=924&user=nursinghumor&area=world">Vote for DuJour in Nursefriendly Topsites</a>
<script language=javascript
src="http://ss.webring.com/navbar?f=j;y=rseymour;u=10099409">
</script><noscript><center>
<table bgcolor=gray cellspacing=0 border=2 bordercolor=red><tr>

<td><table cellpadding=2 cellspacing=0 border=0><tr><td align=center>
<font face=arial size=-1>This site is a member of WebRing.
<br>To browse visit <a href="http://ss.webring.com/navbar?f=l;y=rseymour;u=10099409">
Here</a>.</font></td></tr></table></td></tr></table>
</center></noscript>
</td>
<td align =" left"valign="top">Click on the graphic to vote for this<br />
page as a <a HREF="http://www.stpt.com">Starting Point</a> Hot Site.<br />
<a HREF="http://www.stpt.com/bin/vote.php?sid=3435379&scid=3&int=0&t=DuJour">

<img SRC="/images/vote.gif" BORDER=0></a></td>
<td ALIGN ="left"valign="top"><a href="http://www.policehumor.com/list/in.id?id=rseymour">PoliceHumor.Com</a>
<br /><a href='http://www.tshirtrepublic.com/index.php?vote=66'>Vote for DuJour at T-Shirt Republic</a></center>
</td></tr></table></center>
<!-- BEGIN HUMORLINKS RING CODE -->
<center><table border="1"><tr>
<td colspan="2" nowrap><font face="arial,helvetica" size=2><center>
&#91;
 <a href="http://www.ringsurf.com/netring?ring=humorlinks;id=722;action=prev5"
target="_top">Previous 5 Sites</a>
|
 <a href="http://www.ringsurf.com/netring?ring=humorlinks;id=722;action=sprev"
target="_top">Skip Previous</a>
|
 <a href="http://www.ringsurf.com/netring?ring=humorlinks;id=722;action=prev"
target="_top">Previous</a>

|
 <a href="http://www.ringsurf.com/netring?ring=humorlinks;id=722;action=next"
target="_top">Next</a> &#93;
</center></font></td></tr><tr>
<td nowrap width="50"><a
href="http://www.humorlinks.com/cgi-bin/sites/page.cgi?p=ringsurf&d=1"
target="_top"><img
src="http://www.humorlinks.com/images/ringlogosmall.gif" width="50"
height="50" border="0"
 alt="Click here to join!"></a><br><center><font face="arial,helvetica"
size=2><a
href="http://www.ringsurf.com/netring?ring=humorlinks;action=addform">Join
Us!</a></font></center></td>
<td nowrap width="258"><p align="center">
<font face="arial,helvetica" size=2>
This <a
href="http://www.humorlinks.com/cgi-bin/sites/page.cgi?p=ringsurf&d=1"
target="_top"><b>
HumorLinks Ring</b></a> site<br>owned by<br>
<a href="mailto:rseymour@dujour.ws"><b>DuJour</b></a>

</font></td></tr><tr><td colspan="2" nowrap>
<font face="arial,helvetica" size=2>
<center> &#91;
<a href="http://www.ringsurf.com/netring?ring=humorlinks;id=722;action=skip"
target="_top">Skip Next</a>
|
 <a href="http://www.ringsurf.com/netring?ring=humorlinks;id=722;action=next5"
target="_top">Next 5 Sites</a>
|
 <a href="http://www.ringsurf.com/netring?ring=humorlinks;action=rand"
target="_top">Random Site</a>
|
 <a href="http://www.ringsurf.com/netring?ring=humorlinks;action=list"
target="_top">List Sites</a> &#93;
</center></font></td></tr></table></center>

<!-- END HUMORLINKS RING CODE -->
</body>
<head>
<meta HTTP-EQUIV="Pragma" CONTENT="no-cache">
</head>
</html>
0
rseymour1Commented:
Michel:

Have you or anyone had time to look at this?

Thanks!
Robert
0
Michel PlungjanIT ExpertCommented:
I do not get any errors in neither IE nor Mozilla.
0
Michel PlungjanIT ExpertCommented:
Oops... I do get an error...

there IS no pimg5 and you have 5 images preloaded

change
function SetImages(strName) {
  for (i=0; i<imgs.length; i++) {
    document[strName + i].src = imgs[i].src;
  }
}

to
function SetImages(strName) {
  for (i=0; i<imgs.length; i++) {
    if (document[strName + i]) document[strName + i].src = imgs[i].src;
  }
}
0
Michel PlungjanIT ExpertCommented:
I of course meant there is no pimg5 and you have from 0-5 imgs
0
rseymour1Commented:
That did it!!!

Thank you very much.

I was getting complaints about the download time and probably also turning repeat visitors off.

Most of the images at the bottom are also preloaded, but have not generated much if any traffic, so someday they will probably go.

I did send DuJour to (the big 8) syndicates on Monday. With the faster download speeds, maybe they will be impressed :-)

Wish me luck.

Thanks again for all your help!!!

Robert
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.