variable "preload"routine ?

Bob · Dec 19, 2003

I usually use some "pre-load" code in my pages to preload graphics
that will be swapped. But, I'm thinking that rather than the
long, repetitive, once, for each graphic hardcoded stuff like this:

var bb_off = new Image();
bb_off.src = "images/bb_off.jpg";

....that I could have an array where I just listed the names of the
graphics, a loop, and code in the loop that cycles through each
entry in the array to create and pre-load the "on" and "off"
graphics with code in the loop something like this:

for (...){
var temp = array[index] // contains text name for graphic like bb_off
var eval(temp) = new Image();
eval(temp).src = "images" +
eval(temp) + ".jpg"
}

But, it seems to choke on the first line - creation of an object
with an "eval" name. I tried some tricks with string objects but
there seemed to be problems with that. I suppose I could use a
document.write and just generate the code, but that seems like a lot
of extra work for the browser/system. I'd also like to avoid use
of anything too DOM new as I want backwards compatibility to
NN4 at least. To top it off, my JS is a little rusty. Is there some
way to create a variable/object like this with a varying name in JS ?

Thanks,

McKirahan · Dec 19, 2003

Bob said:
I usually use some "pre-load" code in my pages to preload graphics
that will be swapped. But, I'm thinking that rather than the
long, repetitive, once, for each graphic hardcoded stuff like this:

var bb_off = new Image();
bb_off.src = "images/bb_off.jpg";

...that I could have an array where I just listed the names of the
graphics, a loop, and code in the loop that cycles through each
entry in the array to create and pre-load the "on" and "off"
graphics with code in the loop something like this:

for (...){
var temp = array[index] // contains text name for graphic like bb_off
var eval(temp) = new Image();
eval(temp).src = "images" +
eval(temp) + ".jpg"
}

But, it seems to choke on the first line - creation of an object
with an "eval" name. I tried some tricks with string objects but
there seemed to be problems with that. I suppose I could use a
document.write and just generate the code, but that seems like a lot
of extra work for the browser/system. I'd also like to avoid use
of anything too DOM new as I want backwards compatibility to
NN4 at least. To top it off, my JS is a little rusty. Is there some
way to create a variable/object like this with a varying name in JS ?

Thanks,

<body onLoad="doPreload();">

function doPreload() {
var the_images = new Array('images/1.jpg','images/2.jpg',
'images/3.jpg');
preloadImages(the_images);
}
function preloadImages(the_images_array) {
for (var loop = 0; loop < the_images_array.length; loop++) {
var an_image = new Image();
an_image.src = the_images_array[loop];
}
}

Page 4 - Preloading Images - How's It Done?
http://hotwired.lycos.com/webmonkey/98/29/index3a_page4.html?tw=programming

Dr John Stockton · Dec 19, 2003

JRS: In article <[email protected]>, seen in

news:comp.lang.javascript said:
I usually use some "pre-load" code in my pages to preload graphics
that will be swapped. But, I'm thinking that rather than the
long, repetitive, once, for each graphic hardcoded stuff like this:

var bb_off = new Image();
bb_off.src = "images/bb_off.jpg";

When code is repetitive, you can use a function for it. Then all you
need write for each image is var bb_off = ImLd("images/bb_off.jpg");
that is not necessarily quite as compact as using an array, but it is
easy to read.

function ImLd(S) { (T = new Image()).src = S ; return T }

var Sphere = ImLd("$orb.gif")
var bb_off = ImLd("images/bb_off.jpg")

seems to work for me.

Is there some
way to create a variable/object like this with a varying name in JS ?

The easiest may be to create an array and index it by the names - i.e.
not var Fred = ... ; var Jim = ... ; but var Ar = [] ; Ar["Fred"]
= ... ; Ar["Jim"] = ... ; .

This also creates a name sub-space for images, which seems clean.

Brian Kerrick Nickel · Dec 19, 2003

for (...){

var temp = array[index] // contains text name for graphic like bb_off
var eval(temp) = new Image();
eval(temp).src = "images" +
eval(temp) + ".jpg"
}

You can't treat eval(temp) as a variable in a declaration. Even if it
weren't a syntax error, it would equate to var "undefined = new Image();"

IF this is really how you want to do it, you have two option:
eval( "var " + temp + " = new Image();" );
eval( temp + ".src = 'images/" + temp + ".jpg';" );
OR
window[ temp ] = new Image( );
window[ temp ].src = 'images/' + temp + '.jpg';

A cleaner solution would be to stick each of these items as unnamed
variables in an array, along the lines of:
var images = [ 'bb_off', ... ];
for( var i in images )
{
images[ i ].obj = new Image( );
images[ i ].obj.src = 'images/' + images[ i ] + '.jpg';
}

Or, you could work it into a function:
var preload = function( )
{
for( var i = 0; i < arguments.length; i ++ )
{
this[ i ] = new Image( );
this[ i ].src = 'images/' + arguments[ i ] + '.jpg';
}
}
...
<body onload="preload( 'bb_off', ... );">

- Brian

Image preload problem	0	Sep 8, 2006
When you are lazy...	3	Jan 2, 2025
Flattening linked list problem	4	Dec 3, 2024
Preload images not working	5	Sep 26, 2004
Infinite loop problem	1	Nov 4, 2023
C# list/array of Images to JS	0	Nov 23, 2021
slow preload for IE	2	Mar 1, 2004
"Loading" Graphic (Preload issue)	1	Jun 5, 2004

variable "preload"routine ?

Bob

McKirahan

Dr John Stockton

Brian Kerrick Nickel

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads