preloading images

@maitopoikaOct 31.2008

I have the following code, where i try to preload the images. It is not working it just shows broken images.
If I remove the

[code] img[x]=new Image; [/code]

it works fine, when I is when i try to preload them that it fails to show the images..
can you see what i am doing wrong?

[code] <html> <head> <title>week 10 ex 5</title> <script type=”text/javascript” language=”javascript”> function writeDate(y){

// Set up our variables var img = new Array(“”); var today = new Date(); var date = String(today.getDate()); var month = String(today.getMonth()+1); var year = String(today.getFullYear()); var date1 = date.charAt(0); var date2 = date.charAt(1); // Prime the img array for (x = 1; x <= 7; x++) { img[x] = document.getElementById(“img”+String(x)); }

// Set src of appropriate images an preload the images // 1&2 = day, 3 = month, 4-7 = year if (date2 == “”) { img[2]=new Image; img[2].src = date1 + “.gif”; img[1]=new Image; img[1].src = “space.gif”; } else { img[1]=new Image; img[1].src = date1 + “.gif”; img[2]=new Image; img[2].src = date2 + “.gif”; } img[3]=new Image; img[3].src = “month” +month+ “.gif”; img[4]=new Image; img[4].src = year.charAt(0) + “.gif”; img[5]=new Image; img[5].src = year.charAt(1) + “.gif”; img[6]=new Image; img[6].src = year.charAt(2) + “.gif”; img[7]=new Image; img[7].src = year.charAt(3) + “.gif”;

if(y == ‘eu’){ img[1].src=”./images/dateimgs/month” + month + “.gif”; if (date2 == “”) { img[1].scr =”month” +month+ “.gif”; img[3].src = date1 + “.gif”+”.”; img[2].src = “space.gif”; } else { img[1].src =”month” +month+ “.gif”; img[3].src = date1 + “.gif”+”.”;; img[2].src = date2 + “.gif”+”.”; } } } </script> </head>

<body bgcolor=”#faf0e6″> <HR WIDTH=”80%”>

<CENTER>

<FONT color=”green”> <H1>Week 10 Exercise 4</H1> <H3>Taylor Waldron</H3></font> <HR WIDTH=”80%”> <A HREF=”index.html”><H4>Taylor Waldron’s Homepage</H4></A> <A HREF=”homework.html”><H4>HOMEWORK</H4></A> <br/> <br/>

<script type=”text/JavaScript”> writeDate(‘us’); </script> <input type=”button” value=”English” onclick=”writeDate(‘us’)”/> <input type=”button” value=”Europe” onclick=”writeDate(‘eu’)”/> </center> </body> </html> [/code]

to post a comment

JavaScript

6 Comments(s) _↴

@rnd_meNov 01.2008 — #replace img[2]=new Image;

with img[2]=document.getElementById("img2");

do this for each, keeping the numbers in sync...

it wont truly pre-load them, but it will work.

@astupidnameNov 01.2008 — #img[2]=new Image;[/QUOTE]

should be:
[CODE]img[2]=new Image();[/CODE]
The parens [ () ] are important there I believe, and you should use them any time you are using the new Image() function. So add them to all of them in your script then try it.

Also you have a typo here:
[CODE]img[1].scr ="month" +month+ ".gif";[/CODE]
should be .src - not .scr

@maitopoikaauthorNov 01.2008 — #should be:
[CODE]img[2]=new Image();[/CODE]
The parens [ () ] are important there I believe, and you should use them any time you are using the new Image() function. So add them to all of them in your script then try it.

Also you have a typo here:
[CODE]img[1].scr ="month" +month+ ".gif";[/CODE]
should be .src - not .scr[/QUOTE]

I have tried that.. still same thing.

any more comments to help me with this? I am completely stuck and CANNOT figure this out. Please help! thanks!

@astupidnameNov 02.2008 — #I tested your code out, and it would not work for me in either IE7 or FF3. I re-did the img's src= values to img's in my test folder and still did not work of course. I found a number of things wrong and fixed them. These are the things I found wrong (that I remember):

[code=html]var img = new Array(""); //<<<<<-------no need for the quotes
 
 img[2]=new Image; //<<<<<-------I added parens () to all of these new Image functions, as they really should be there
 
   // Prime the img array
   for (x = 1; x <= 7; x++) {
   img[x] = document.getElementById("img"+String(x)); //<<<<<-------/*****this is wrong, also this for loop is out of place, should be at the end of the function, also should be assigning the id'd img's in the document an src value equal to img[x] 's .src value *****/
   }
 
 img[3].src = date1 + ".gif"+".";; //<<<<<------- extra semicolon ' ; '[/code]

And this is what is working for me now in both IE7 and FF3 (I leave it to you to switch the .src = values back to what you had):

[code=html]<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 <html>
 <head>
 <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
 <title>week 10 ex 5</title>
 <script type="text/javascript" language="javascript">
 function writeDate(y){
 
   // Set up our variables
   var img = new Array();
   var today = new Date();
   var date = String(today.getDate());
   var month = String(today.getMonth()+1);
   var year = String(today.getFullYear());
   var date1 = date.charAt(0);
   var date2 = date.charAt(1);
 
 
   // Set src of appropriate images an preload the images
   // 1&2 = day, 3 = month, 4-7 = year
   if (date2 == "") {
   img[2]=new Image();
   img[2].src =  "2_th.gif";
   img[1]=new Image();
   img[1].src = "1_th.gif";
   }
   else {
   img[1]=new Image();
   img[1].src =  "1_th.gif";
   img[2]=new Image();
   img[2].src =  "2_th.gif";
   }
   img[3]=new Image();
   img[3].src =  "3_th.gif";
   img[4]=new Image();
   img[4].src =  "4_th.gif";
   img[5]=new Image();
   img[5].src =  "5_th.gif";
   img[6]=new Image();
   img[6].src =  "1_th.gif";
   img[7]=new Image();
   img[7].src =  "2_th.gif";
 
   if(y == 'eu'){
   img[1].src="1_th.gif";
   if (date2 == "") {
   img[1].src ="1_th.gif";
   img[3].src =  "3_th.gif";
   img[2].src = "2_th.gif";
   } else {
   img[1].src ="1_th.gif";
   img[3].src = "3_th.gif";
   img[2].src = "2_th.gif";
   }
   }
   // Prime the img array
   for (x = 1; x <= 7; x++) {
   var holdImgName = "img"+x;
   document.getElementById(holdImgName).src = img[x].src;
   }
  }
 </script>
 </head>
 
 <body bgcolor="#faf0e6">
 <HR WIDTH="80%">
 
   <CENTER>
 
   <FONT color="green">
   <H1>Week 10 Exercise 4</H1>
   <H3>Taylor Waldron</H3></font>
   <HR WIDTH="80%">
   <A HREF="index.html"><H4>Taylor Waldron's Homepage</H4></A>   <A HREF="homework.html"><H4>HOMEWORK</H4></A>
   <br/>
   <br/>
 
  <table id="dateTable" border="0" cellpadding="0" cellspacing="0">
  <tr>
   <td><img id="img1" name="img1" border="0" /></td>
   <td><img id="img2" name="img2" border="0" /></td>
   <td><img id="img3" name="img3" border="0" /></td>
   <td><img id="img4" name="img4" border="0" /></td>
   <td><img id="img5" name="img5" border="0" /></td>
   <td><img id="img6" name="img6" border="0" /></td>
   <td><img id="img7" name="img7" border="0" /></td>
  </tr>
 </table>
 
   <script type="text/JavaScript">
   writeDate('us');
   </script>
   <input type="button" value="English" onclick="writeDate('us')"/>
  <input type="button" value="Europe" onclick="writeDate('eu')"/>
 </center>
 </body>
 </html>[/code]

Now just a few other notes, it should not be necessary for you to declare the date objects values as strings like you are doing I believe: var date = String(today.getDate()); <<<---you could take the String() function out of that, you are creating a string anyways when you go: img[3].src = "month" +month+ ".gif"; -as an example, that creates a string anyhow.

Also, for what you are doing it does not actually appear necessary for you to preload the images here, as you are just placing the images straight on to the page anyhow it would seem. Preloading is really only necessary when the images won't be immediately shown on the page but will be shown later dynamically such as onmouseovers or in slideshows etc. So you could just build your img array without the .src values or the = new Image(); function.

For example you could just do like this:

var img = new Array();

img[1] = "pic1.gif";

img[2] = date1 + ".gif";

etc....

And then do this:

document.getElementById(holdImgName).src = img[x]; //<<<<-----leave the .src off of the img[x];

Well, I hope this helps set you on your way, and good luck!

@maitopoikaauthorNov 02.2008 — #Thank you all,

The only reason I need to preload them is it is for an assignment. I agree and don't really see the reason to do it... other than learning how i guess.

Thanks again

@rnd_meNov 02.2008 — #should be:
[CODE]img[2]=new Image();[/CODE]
The parens [ () ] are important there I believe, and you should use them any time you are using the new Image() function. So add them to all of them in your script then try it.[/QUOTE]

nope. parens are optional as using the new keyword invokes the function as a constructor. in fact, the firefox source formatting omits them.

Also in #JavaScript _↴

[RESOLVED] Please help: problem with scrolling javascript function not defined error in firefox JavaScript: Calculations/Sum

Success!

Help @maitopoika spread the word by sharing this article on Twitter...

Tweet This

preloading images

6 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

preloading images

6 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

6 Comments(s) _↴

Also in #JavaScript _↴