PDA

View Full Version : image preload question

allison
11-18-2002, 04:08 PM
hi everyone,

do i need to specify the location of the image before i create space for it with the new keyword?

this is what we have now.



var pics = new Array();
...//some code
for(i=0;i<num;i++)
{
pics[i] = new Image();
...//some code
}

pics[0] = "some/path1"
pics[1] = "some/path2"
pics[2] = "some/path3"



or does this

pics[0] = "some/path1"
pics[1] = "some/path2"
pics[2] = "some/path3"

come before

pics[i] = new Image(); ?

in other words

the line -> var pics = new Array();
should be changed
to

var pics = new Array("some/path1","some/path2","some/path3");


furthermore how can i know for sure if images are being preloaded?
should i just put an alert in the loop( is that enough)?
also how is the script being read?
does the browser read an html page?

thanks in advance.

allison
beetle
11-18-2002, 06:51 PM
Best way to do a looping preloader like you have is like this...function preload() {
// Define variables
var imgRoot = "images/";
var pics = new Array();
var picNames = new Array("image1.jpg","image2.jpg","image3.jpg");

// Preload images
for (var i=0; i<picNames.length; i++) {
pics[i] = new Image();
pics[i].src = imgRoot + picNames[i];
}
}

<body onload="preload();">The main problem you were having was the missing src attribute that receives the string filename.
allison
11-18-2002, 08:17 PM
Hi beetle :)
sorry i just wrote it real fast and forgot the src

we the code really is


pics[0].src = "some/path1"
pics[1].src = "some/path2"
pics[2].src = "some/path3"


my confusion is with this line


function preload() {
// Define variables
var imgRoot = "images/";
var pics = new Array();
var picNames = new Array("image1.jpg","image2.jpg","image3.jpg");

// Preload images
for (var i=0; i<picNames.length; i++) {
pics[i] = new Image();
pics[i].src = imgRoot + picNames[i];
}
}
<body onload="preload();">



you specify the src right after reserving memory for the image
(all in one iteration)

in our code they loop through creating all the image variables and then and only then do they add the src

our code is something like this

var pics = new Array();

for(i=0;i<num;i++)
{
pics[i] = new Image(); //create the right amout of image objects and then after the loop is done
}
//more code
for(i=0;i<num;i++)
{
pics[i].src = "paths[i]
...//more code
}


now I know that i can put all this in one loop like you did and that will be ok but if i were to leave it like it is,are the images being preloaded?

i just don't see how something can be preloaded if the computer doesn't know what is being preloaded ( sorry i cannot explain it better, i am quite new to javascript and often lose myself lol )

that's whay i was asking how is html pages are being read
the browsers.

thanks for your help

allison
beetle
11-18-2002, 08:44 PM
The moment you assign a src to an Image object, the browser will download it. If you must know for sure, add this line...function preload() {
// Define variables
var imgRoot = "images/";
var pics = new Array();
var picNames = new Array("image1.jpg","image2.jpg","image3.jpg");

// Preload images
for (var i=0; i<picNames.length; i++) {
pics[i] = new Image();
pics[i].src = imgRoot + picNames[i];
pics[i].onload = function() { alert(this.src + " has been preloaded"); }
}
}
allison
11-18-2002, 09:13 PM
thanks for your help, beetle
now it makes sense to me. :p

allison