Closure code to assign image index to onload handler

[howardk]

I'm writing some code that loads a number of images, using the
standard mechanism of assigning a src url to a newly constructed Image
object, thus invoking the image-load operation. On a successful load,
an image.onload handler I've previously assigned will be called. Or
should be at any rate.

The problem is that I need to know inside the onload handler which
particular image in the array invoked the handler. I'd be quite happy
to know the array index of the successfully loaded image, but since
onload handler assignments can't take a parameter, I can't assign the
index when I set up the onload call. So I'm a bit stumped.

The answer seems to be to use a closure to supply the index of the
invoking image when I set up the handler, but I'm still struggling a
bit w/ closures and can't seem to be able to get the syntax right. Can
anyone supply a snippet of code to show how to do this?

Any help would be much appreciated!
Thanks,
Howard

[slebetman]

On Nov 1, 12:08*am, howardk <howar...@gmail .comwrote:

I'm writing some code that loads a number of images, using the
standard mechanism of assigning a src url to a newly constructed Image
object, thus invoking the image-load operation. On a successful load,
an image.onload handler I've previously assigned will be called. Or
should be at any rate.

The problem is that I need to know inside the onload handler which
particular image in the array invoked the handler. I'd be quite happy
to know the array index of the successfully loaded image, but since
onload handler assignments can't take a parameter, I can't assign the
index when I set up the onload call. So I'm a bit stumped.

The answer seems to be to use a closure to supply the index of the
invoking image when I set up the handler, but I'm still struggling a
bit w/ closures and can't seem to be able to get the syntax right. Can
anyone supply a snippet of code to show how to do this?

var imgObject = somehowCreateIm ageObject();
imgObject.src = uriPath;
imgObject.onloa d = function () {
onloadHandler(i mgObject);
}
/*
but remember, you're not passing the value of the variable here,
you're passing the variable itself. So if used in a loop all
the handlers will get the last value of imgObject. But you can
create another closure to pass a reference to that specific
instance of the variable like so:
*/

(function (x) {
imgObject.onloa d = function () {
onloadHandler(x );
}
})(imgObject); // <-- here you pass a ref to imgObject as x

[David Mark]

On Oct 31, 3:52*pm, slebetman <slebet...@gmai l.comwrote:

On Nov 1, 12:08*am, howardk <howar...@gmail .comwrote:

I'm writing some code that loads a number of images, using the
standard mechanism of assigning a src url to a newly constructed Image
object, thus invoking the image-load operation. On a successful load,
an image.onload handler I've previously assigned will be called. Or
should be at any rate.

Should in some browsers.

>

The problem is that I need to know inside the onload handler which
particular image in the array invoked the handler. I'd be quite happy
to know the array index of the successfully loaded image, but since
onload handler assignments can't take a parameter, I can't assign the
index when I set up the onload call. So I'm a bit stumped.

The answer seems to be to use a closure to supply the index of the
invoking image when I set up the handler, but I'm still struggling a
bit w/ closures and can't seem to be able to get the syntax right. Can
anyone supply a snippet of code to show how to do this?

var imgObject = somehowCreateIm ageObject();

Now there is a black box.

imgObject.src = uriPath;
imgObject.onloa d = function () {
* onloadHandler(i mgObject);

}

/*
* but remember, you're not passing the value of the variable here,
* you're passing the variable itself. So if used in a loop all

You mean a reference to the image?

* the handlers will get the last value of imgObject. But you can
* create another closure to pass a reference to that specific
* instance of the variable like so:
*/

(function (x) {
* imgObject.onloa d = function () {
* * onloadHandler(x );
* }

})(imgObject); // <-- here you pass a ref to imgObject as x

This will leak memory in IE (and is needlessly complex.)

How about:

imgObject.onloa d = onloadHandler;

Then refer to the image object as "this".

[howardk]

On Oct 31, 12:36*pm, David Mark <dmark.cins...@ gmail.comwrote:

On Oct 31, 3:52*pm, slebetman <slebet...@gmai l.comwrote:

On Nov 1, 12:08*am, howardk <howar...@gmail .comwrote:

I'm writing some code that loads a number of images, using the
standard mechanism of assigning a src url to a newly constructed Image
object, thus invoking the image-load operation. On a successful load,
an image.onload handler I've previously assigned will be called. Or
should be at any rate.

Should in some browsers.

The problem is that I need to know inside the onload handler which
particular image in the array invoked the handler. I'd be quite happy
to know the array index of the successfully loaded image, but since
onload handler assignments can't take a parameter, I can't assign the
index when I set up the onload call. So I'm a bit stumped.

The answer seems to be to use a closure to supply the index of the
invoking image when I set up the handler, but I'm still struggling a
bit w/ closures and can't seem to be able to get the syntax right. Can
anyone supply a snippet of code to show how to do this?

var imgObject = somehowCreateIm ageObject();

Now there is a black box.

imgObject.src = uriPath;
imgObject.onloa d = function () {
* onloadHandler(i mgObject);

}

/*
* but remember, you're not passing the value of the variable here,
* you're passing the variable itself. So if used in a loop all

You mean a reference to the image?

* the handlers will get the last value of imgObject. But you can
* create another closure to pass a reference to that specific
* instance of the variable like so:
*/

(function (x) {
* imgObject.onloa d = function () {
* * onloadHandler(x );
* }

})(imgObject); // <-- here you pass a ref to imgObject as x

This will leak memory in IE (and is needlessly complex.)

How about:

imgObject.onloa d = onloadHandler;

Then refer to the image object as "this".

Here's what I finally ended up doing, and it seems to work ok:

function imageLoaded( n ) {
return function( ) {
if ( window.console ) {
window.console. log( 'You\' just loaded image# ' + n );
// do stuff with images[ n ] image object
}
}
};

function loadAllImages() {
var image = new Image();
image.onload = imageLoaded(i);
...
}

[Thomas 'PointedEars' Lahn]

slebetman wrote:

var imgObject = somehowCreateIm ageObject();
imgObject.src = uriPath;
imgObject.onloa d = function () {
onloadHandler(i mgObject);
}

/*
but remember, you're not passing the value of the variable here,
you're passing the variable itself.

Nonsense.

So if used in a loop all
the handlers will get the last value of imgObject.

The reason for that would be late resolution of the variable identifier
instead, supported by the closure that the function expression creates.
PointedEars
--
realism: HTML 4.01 Strict
evangelism: XHTML 1.0 Strict
madness: XHTML 1.1 as application/xhtml+xml
-- Bjoern Hoehrmann

[David Mark]

On Nov 1, 6:28*pm, howardk <howar...@gmail .comwrote:

On Oct 31, 12:36*pm, David Mark <dmark.cins...@ gmail.comwrote:

On Oct 31, 3:52*pm, slebetman <slebet...@gmai l.comwrote:

On Nov 1, 12:08*am, howardk <howar...@gmail .comwrote:

I'm writing some code that loads a number of images, using the
standard mechanism of assigning a src url to a newly constructed Image
object, thus invoking the image-load operation. On a successful load,
an image.onload handler I've previously assigned will be called. Or
should be at any rate.

Should in some browsers.

The problem is that I need to know inside the onload handler which
particular image in the array invoked the handler. I'd be quite happy
to know the array index of the successfully loaded image, but since
onload handler assignments can't take a parameter, I can't assign the
index when I set up the onload call. So I'm a bit stumped.

The answer seems to be to use a closure to supply the index of the
invoking image when I set up the handler, but I'm still struggling a
bit w/ closures and can't seem to be able to get the syntax right. Can
anyone supply a snippet of code to show how to do this?

var imgObject = somehowCreateIm ageObject();

Now there is a black box.

imgObject.src = uriPath;
imgObject.onloa d = function () {
* onloadHandler(i mgObject);

}

/*
* but remember, you're not passing the value of the variable here,
* you're passing the variable itself. So if used in a loop all

You mean a reference to the image?

* the handlers will get the last value of imgObject. But you can
* create another closure to pass a reference to that specific
* instance of the variable like so:
*/

(function (x) {
* imgObject.onloa d = function () {
* * onloadHandler(x );
* }

})(imgObject); // <-- here you pass a ref to imgObject as x

This will leak memory in IE (and is needlessly complex.)

How about:

imgObject.onloa d = onloadHandler;

Then refer to the image object as "this".

Here's what I finally ended up doing, and it seems to work ok:

function imageLoaded( n ) {
* * return function( ) {
* * * * *if ( window.console ) {
* * * * * * *window.console .log( 'You\' just loaded image# ' + n );
* * * * * * *// do stuff with images[ n ] image object
* * * * *}
* * }

};

function loadAllImages() {
* * var image = new Image();
* * image.onload = imageLoaded(i);
* * ...

}

Why not:

function imageLoaded() {
window.alert(th is.src);
}

var image = new Image();
image.onload = imageLoaded;
....

And make sure the Image constructor exists before calling it.

[Thomas 'PointedEars' Lahn]

David Mark wrote:

On Nov 1, 6:28 pm, howardk <howar...@gmail .comwrote:

>Here's what I finally ended up doing, and it seems to work ok:

function imageLoaded( n ) {
return function( ) {
if ( window.console ) {
window.console. log( 'You\' just loaded image# ' + n );
// do stuff with images[ n ] image object
}
}

};

function loadAllImages() {
var image = new Image();
image.onload = imageLoaded(i);
...

}

Why not:

function imageLoaded() {
window.alert(th is.src);
}

var image = new Image();
image.onload = imageLoaded;
...

Two good reasons:

1. There we have a global method to no obvious advantage.

2. The OP wanted to know the *index* of the image object or data
related thereto in *another* data structure, not its URI.
I would presume something should happen to that image or for it
when it was loaded.

An application that comes to mind, since I have been dealing
with it before, is loading the high-resolution version of an
image when the low-res version has finished loading. To do
that, it doesn't help to know the URI of the low-res image,
you need a reference to the target (HTML)Image(Ele ment) object;
the index of the image object helps to retrieve that.

And make sure the Image constructor exists before calling it.

Full ACK.
PointedEars
--
Use any version of Microsoft Frontpage to create your site.
(This won't prevent people from viewing your source, but no one
will want to steal it.)
-- from <http://www.vortex-webdesign.com/help/hidesource.htm>

[David Mark]

On Nov 3, 6:24*am, Thomas 'PointedEars' Lahn <PointedE...@we b.de>
wrote:

David Mark wrote:

On Nov 1, 6:28 pm, howardk <howar...@gmail .comwrote:

Here's what I finally ended up doing, and it seems to work ok:

function imageLoaded( n ) {
* * return function( ) {
* * * * *if ( window.console ) {
* * * * * * *window.console .log( 'You\' just loaded image# ' + n );
* * * * * * *// do stuff with images[ n ] image object
* * * * *}
* * }

};

function loadAllImages() {
* * var image = new Image();
* * image.onload = imageLoaded(i);
* * ...

}

Why not:

function imageLoaded() {
* *window.alert(t his.src);
}

var image = new Image();
image.onload = imageLoaded;
...

Two good reasons:

1. There we have a global method to no obvious advantage.

Well, it doesn't have to be global. As written, yes.

>
2. The OP wanted to know the *index* of the image object or data
* *related thereto in *another* data structure, not its URI.
* *I would presume something should happen to that image or for it
* *when it was loaded.

If he has data stored about the image, then yes that would be a good
case for using the other solution.

[snip]