PDA

View Full Version : Preload images

shashgo
10-17-2002, 04:43 AM
Why doesnt this work
I have a directory with images 3.jpg,5.jpg,10.jpg,11.jpg,13.jpg,15.jpg,19.jpg

and I want to use the following script to load the complete images (that is those that exist) into an array.
When I run it, I get 3 alert boxs, 1.jpg not loaded,2.jpg not loaded, 3.jpg not loaded, 4.jpg scessfully loaded. This is wrong? why is it doing this?

Also after the alert 4.jpg sucessfully loaded, I gt an erro saying document.nisha is null or not an object. Why?
Here is the script

<html>
<head>
<title>Nisha</title>
</head>
<body>
<script language="javascript">

<!--
var numImages=20;
var imgArr=new Array();
var pic=new Image();

for (i=1;i<=numImages;i++)
{
imgArr[i-1]=new Image();
pic.src=i+".jpg";
if (pic.complete)
{
imgArr[i-1].src=pic.src;
alert("Image "+i+" loaded succesfully");
document.nisha.src=imgArr[i-1].src;
}
else
{
alert("Image"+i+" not found");
}
}
-->

</script>
<img src="" name="nisha">
</body>
</html>
lpok
10-17-2002, 05:31 AM
You are using if (pic.complete) right after you assigned the image to be loaded. It is likely not going to be loaded that quickly. If you want to load your images this way, you should run a timer, like for every 1 second and test if your images are loaded.

Another option is to use the onload and onerror event of the Image object. I remeber webmokey.com had a good tutorial on preloading images, don't know if it is still there though
shashgo
10-17-2002, 02:45 PM
Lpok,

the webmonkey.com is a nice site, lot of info. And it does have a script for preloading. However, that script doesnt dynamically load images into th array. Rather, the image name are listed in the array as individual elements and then loaded into another variable at atime.

Furthermore the script doesnt address the complete property of an image (image.complete), but I think hat you said in your post sounds true because like you said, images do need time to load.

The problem Im having in my script is that I get an error that says document.nisha may be null or is not an object even though I have defined nisha to be the name of an image in the html below.

Why is that happening?

The script again is

<html>
<head>
<title>Nisha</title>
</head>
<body>
<script language="javascript">

<!--
var numImages=20;
var imgArr=new Array();
var pic=new Image();

for (i=1;i<=numImages;i++)
{
imgArr[i-1]=new Image();
pic.src=i+".jpg";
if (pic.complete)
{
imgArr[i-1].src=pic.src;
alert("Image "+i+" loaded succesfully");
document.nisha.src=imgArr[i-1].src;
}
else
{
alert("Image"+i+" not found");
}
}
-->

</script>
<img src="" name="nisha">
</body>
</html>
Roelf
10-17-2002, 02:51 PM
the script is executed before the rest of the html is rendered, therefor the imagetag doesn´t exist yet
shashgo
10-17-2002, 03:03 PM
Roelff,

I have the script within the body. Earlier I had it in the head section, but then I figured that if the script is in the head section, it will get executed before the body loads so I put it in the body section. Does the script still execute before the rest of the body? It should not should it?

And if so, how would I get the img nisha defined before th script executes?
beetle
10-17-2002, 04:58 PM
Try this on for size....var imgSrc = new Array('http://www.google.com/images/logo.gif','http://bmw.jedinite.com/M3/images/640/16090006.jpg','http://www.internet.com/blah.jpg');
var imgArr = new Array();
var i;

function preload() {
for (i=0;i<imgSrc.length;i++) {
var pic=new Image();
pic.src= imgSrc[i];
pic.onload = addIt;
pic.onerror = errorIt;
}
}
function addIt() {
imgArr.push(this);
}
function errorIt() {
return;
}
shashgo
10-18-2002, 02:55 AM
To all,

I have writtten the following code to do what I want, but it doesnt? The only alert I get is 'No images loaded'. Why is it not doing what I want, which is to cycle through a series of images, to load them, report whether successfully loaded (img.complete) and then to display the images that are loaded?

<html>
<head>
<title>Nisha</title>
<script language="javascript">
<!--
var numImages=20; //total number of imagee files
var num=0; //counter that counts # of complete images
var imgArr=new Array(); //array that will hold only the complete images
var pic=new Image(); //variable into which each image file is loaded, complete or not
function loadem()
{
for (i=1;i<=numImages;i++) //loop from the 1st image to the last
{
pic.src=i+".jpg"; //load an image
if (pic.complete) //if it is complete, then
{
imgArr[num]=new Image(); //instantiate an element of the array as an image
imgArr[num].src=pic.src; //load the complete image into that element of the array
alert("Picture["+num+"] is actually picture "+i);
document.nisha.src=imgArr[num].src; //display the image that was just loaded
num++; //increment count of complete valid images
pic.src=null; //set the temporary picture holder to null
}
}
if (num==0) //if there are zero complete images, then
{
alert("No images loaded."); //display alert saying so and
return; //return to the main html
}
else //otherwise
{
i=0; //point a counter to the 1st element of the array of complete images
dispImages(); //call a function to display the images as a slideshow
}
}

function dispImages()
{
document.nisha.src=imgArr[i].src; //display an element of the array
if (i<=num) i++; //inc. the array counter if it does not point to the last element
setInterval("dispImages()",2000); //set the interval for the slideshow
}

-->
</script>

</head>
<body onload="loadem()">
<img src="" name="nisha">
</body>
</html>