Solved

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

Posted on 2003-11-07
30
4,147 Views
Last Modified: 2007-11-27
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.
0
Comment
Question by:madasczik
  • 11
  • 8
  • 5
  • +5
30 Comments
 
LVL 2

Expert Comment

by:Codescripter
ID: 9706359
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 9706378
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
 
LVL 2

Expert Comment

by:Codescripter
ID: 9706386
You should be fully aware, however, that there is a problem (bug) with image caching in Internet Explorer 6...
0
 
LVL 2

Expert Comment

by:Codescripter
ID: 9706389
That's a nice idea, mplungjan.  That makes it more modular.
0
 
LVL 28

Expert Comment

by:sybe
ID: 9706397
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
 
LVL 2

Expert Comment

by:Codescripter
ID: 9706402
sybe, very eloquent!  This also lends to the idea of a second (initially visible) div that says, "Loading..."
0
 
LVL 11

Expert Comment

by:Zontar
ID: 9706548
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 9706847
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
 
LVL 15

Expert Comment

by:JakobA
ID: 9707638
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 9708038
Hmm, sort of like EE with their 60 corner gifs per page ;)
0
 

Author Comment

by:madasczik
ID: 9708090
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
 
LVL 11

Expert Comment

by:Zontar
ID: 9708448
>  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
 
LVL 31

Accepted Solution

by:
GwynforWeb earned 500 total points
ID: 9709224
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
 
LVL 2

Expert Comment

by:Codescripter
ID: 9741106
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
 

Expert Comment

by:rseymour1
ID: 10343898
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
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 10351261
What is strName?

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

Expert Comment

by:rseymour1
ID: 10352564
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 10353757
If you have
<img name="pimg0" src="blank.gif">
<img name="pimg1" src="blank.gif">
on your page, the script should work
0
 

Expert Comment

by:rseymour1
ID: 10356429
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 10356941
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
 

Expert Comment

by:rseymour1
ID: 10357149
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 10357726

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

but you NEED 6 images on the page named
pimg0 to pimg5
0
 

Expert Comment

by:rseymour1
ID: 10363450
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 10363457
Post the complete html

what error do you get???
0
 

Expert Comment

by:rseymour1
ID: 10382762
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
 

Expert Comment

by:rseymour1
ID: 10454915
Michel:

Have you or anyone had time to look at this?

Thanks!
Robert
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 10455251
I do not get any errors in neither IE nor Mozilla.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 10455277
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 10455282
I of course meant there is no pimg5 and you have from 0-5 imgs
0
 

Expert Comment

by:rseymour1
ID: 10460108
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

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Avoid defining the variables in the global scope; trying to define them in a local function scope. Because:   • Look-up is performed every time a variable is accessed.   • Variables are resolved backwards from most specific to least specific scope…
The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

743 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now