473,382 Members | 1,204 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,382 software developers and data experts.

Closure code to assign image index to onload handler

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
Oct 31 '08 #1
7 3130
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 = somehowCreateImageObject();
imgObject.src = uriPath;
imgObject.onload = function () {
onloadHandler(imgObject);
}
/*
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.onload = function () {
onloadHandler(x);
}
})(imgObject); // <-- here you pass a ref to imgObject as x
Oct 31 '08 #2
On Oct 31, 3:52*pm, slebetman <slebet...@gmail.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 = somehowCreateImageObject();
Now there is a black box.
imgObject.src = uriPath;
imgObject.onload = function () {
* onloadHandler(imgObject);

}

/*
* 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.onload = 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.onload = onloadHandler;

Then refer to the image object as "this".
Oct 31 '08 #3
On Oct 31, 12:36*pm, David Mark <dmark.cins...@gmail.comwrote:
On Oct 31, 3:52*pm, slebetman <slebet...@gmail.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 = somehowCreateImageObject();

Now there is a black box.
imgObject.src = uriPath;
imgObject.onload = function () {
* onloadHandler(imgObject);
}
/*
* 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.onload = 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.onload = 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);
...
}
Nov 1 '08 #4
slebetman wrote:
var imgObject = somehowCreateImageObject();
imgObject.src = uriPath;
imgObject.onload = function () {
onloadHandler(imgObject);
}

/*
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
Nov 2 '08 #5
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...@gmail.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 = somehowCreateImageObject();
Now there is a black box.
imgObject.src = uriPath;
imgObject.onload = function () {
* onloadHandler(imgObject);
}
/*
* 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.onload = 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.onload = 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(this.src);
}

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

And make sure the Image constructor exists before calling it.
Nov 3 '08 #6
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(this.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(Element) 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>
Nov 3 '08 #7
On Nov 3, 6:24*am, Thomas 'PointedEars' Lahn <PointedE...@web.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(this.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]
Nov 3 '08 #8

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

8
by: TheKeith | last post by:
I'm doing an image cycler but can't figure out why it keeps getting hung up on the third pic in the array? Here is what I have: ...
1
by: Roger Shrubber | last post by:
Good day In an image onload handler, how do I access the image that just loaded? If the image is attached to the document, I can access it using the field window.event.srcElement. But I...
2
by: Charles Harrison Caudill | last post by:
I'm trying to write a function to determine whether or not an image exists. Most people recommend setting the onload event handler. That works like a charm except that side-effective actions...
2
by: Martin Honnen | last post by:
I was playing around with canvas support in recent Safari, Mozilla and Opera (only version 9 preview) but run into issues with Safari related to the very old DOM Level 0 Image object for preloading...
1
by: laurakr | last post by:
I am trying to use a clear to get my bottom nav bar below the quote box on the right, but it isn't working. I would like the bottom edge of the quote box to "stick" to the footer nav bar but copy...
53
by: Hexman | last post by:
Hello All, I'd like your comments on the code below. The sub does exactly what I want it to do but I don't feel that it is solid as all. It seems like I'm using some VB6 code, .Net2003 code,...
11
by: Adam Sandler | last post by:
Hello, Having an issue with JavaScript in my ASP.Net page. I use some COTS, which for all intents and purposes, simply makes a jpeg file and physically places it in a directory on the web...
11
by: webgour | last post by:
Hello, I am wondering why the following works, on IE6, but with an error : "Not implemented". function TEST(){} TEST.prototype.Initialize = function() { var mImage = new Image(); var mDate...
7
by: AAaron123 | last post by:
I read the help on which says: The ClientScriptManager class is used to manage client-side scripts and add them to Web applications... But could use a little help. Can someone tell me what...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...
0
by: ryjfgjl | last post by:
In our work, we often need to import Excel data into databases (such as MySQL, SQL Server, Oracle) for data analysis and processing. Usually, we use database tools like Navicat or the Excel import...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.