How to pass a parameter via an image.onload function call?

[Tuxedo]

How is it possible to pass a parameter via a function that runs upon onload
of an off-screen image? Like for example:

preload_image = new Image(800,600);
preload_image.onload = photo_preloaded(PARAMETER);
preload_image.src = 'images/photo.jpg';

However, this doesn't completely work, because the function
photo_preloaded(PARAMETER) will run regardless of whether the image
finished preloading or not. In normal cases, I do this kind of preloading
without parameters, which works fine, as follows:

preload_image.onload = photo_preloaded;

Instead, I'd like to run the preloading procedure as part of a first
function with the parameter from where it is called at an onclick action
and that is passed onto a second function. Altogether like this:

function first_function(PARAMETER){
preload_image = new Image(800,600);
preload_image.onload = photo_preloaded(PARAMETER);
preload_image.src = 'images/photo.jpg';
}

function photo_preloaded(PARAMETER){
alert(PARAMETER)
}

<a href="..." onclick="first_function('Rambazamba!")">Click here</a>

The above works as far as running and passing the parameters between the
two functions as well as preloading the image. The second function does
however not necessarily run after the image has been preloaded. In fact, it
will run even if photo.jpg does not exist on the server.

Is is possible to run the second function only if the image has been
preloaded, with the parameter? If so, how would this be constructed?

Many thanks for any tips,
Tuxedo

 

[Janwillem Borleffs]

Tuxedo schreef:

However, this doesn't completely work, because the function
photo_preloaded(PARAMETER) will run regardless of whether the image
finished preloading or not. In normal cases, I do this kind of preloading
without parameters, which works fine, as follows:

You can check the Image.complete property; example:

img = new Image(100,100);
interval = setInterval('checkcomplete()', 100);
img.src = 'someimg';

function checkcomplete() {
if (window['img'].complete) {
alert(1);
clearInterval(window['interval']);
}
}


JW

 

[Janwillem Borleffs]

Tuxedo schreef:

However, this doesn't completely work, because the function
photo_preloaded(PARAMETER) will run regardless of whether the image
finished preloading or not. In normal cases, I do this kind of preloading
without parameters, which works fine, as follows:

preload_image.onload = photo_preloaded;

Additionally, you can still use this, but if you want to pass a
parameter it has to be done by photo_preloaded:

function photo_preloaded() {
handle_status('PRELOADING');
}

function handle_status(status) {
alert(status);
}


JW

 

[Jorge]

How is it possible to pass a parameter via a function that runs upon onload
of an off-screen image? Like for example:

(...)

function first_function(PARAMETER){
preload_image = new Image(800,600);
preload_image.onload = photo_preloaded(PARAMETER);
preload_image.src = 'images/photo.jpg';

}

function photo_preloaded(PARAMETER){
alert(PARAMETER)

}

(...)

Is is possible to run the second function only if the image has been
preloaded, with the parameter? If so, how would this be constructed?

Yes:

function first_function (PARAMETER) {
preload_image = new Image(800,600);
preload_image.onload = function () { photo_preloaded(PARAMETER); };
preload_image.src = 'images/photo.jpg';
}

 

[Tuxedo]

Tuxedo schreef:

Additionally, you can still use this, but if you want to pass a
parameter it has to be done by photo_preloaded:

function photo_preloaded() {
handle_status('PRELOADING');
}

function handle_status(status) {
alert(status);
}


JW

Many thanks for posting this and the previous which I understand does
interval checking.

However, I think I will go for the next alternative posted by Jorge.

Tuxedo

 

[Tuxedo]

Jorge wrote:
[..].

preload_image.onload = function () { photo_preloaded(PARAMETER); };

Thanks for posting this snipped! I understand it uses a so-called function
literal, or unnamed function call. It works fine, and appears to be the
most straighforward solution specifically for what I'd like to achieve.

 

[Thomas 'PointedEars' Lahn]

Tuxedo schreef:

You can check the Image.complete property;

But you should not. That property is not even remotely interoperable.
Instead, use the `onload' event handler:

var img = new Image(...);
img.onload = function() {
this.onload = null;
foo();
};
img.src = "...";

example:

img = new Image(100,100);

Always declare your identifiers.

interval = setInterval('checkcomplete()', 100);

setInterval() is defined as a method of Window objects, not of the Global
Object. Should be

window.setInterval(...)

However, window.setInterval() is error-prone and has a tendency to cause
extensive CPU load, especially with this short an interval (100 ms).
Repeated checking like this should be only the last resort.

img.src = 'someimg';

function checkcomplete() {
if (window['img'].complete) {

Never rely on that references to element objects can be retrieved through
same-named properties of `window' or the Global Object alone.

This will continue forever (and may accumulate timeouts, given enough DOM
action) if the `complete' property is unsupported (see above).

alert(1);
clearInterval(window['interval']);

You should not rely on that the object referred to by `window' is the
Variable Object of an execution context. Another property lookup is also
unnecessary here, the identifier lookup along the scope chain can take care
of it.

}
}

JFTR (the better solution is on the top):

var img = new Image(100, 100);
var interval = window.setInterval('checkcomplete()', 100);
img.src = 'someimg';

function checkcomplete()
{
if (document.images['img'].complete)
{
window.alert(1);
window.clearInterval(interval);
}
}


PointedEars

 

[sasuke]

window.setInterval(...)

However, window.setInterval() is error-prone and has a tendency to cause
extensive CPU load, especially with this short an interval (100 ms).
Repeated checking like this should be only the last resort.

Interesting; any links which discuss in detail the `error prone'
nature of window.setInterval()?

 

[Thomas 'PointedEars' Lahn]

Interesting; any links which discuss in detail the `error prone'
nature of window.setInterval()?

There are plenty of them in Google Groups, which you are using.


PointedEars

 

[Jorge]

Interesting; any links which discuss in detail the `error prone'
nature of window.setInterval()?

It's not error-prone. It's just that *some* people don't understand
it.

If code sets a setInterval(f, n), the browser will keep pushing into
the timers' queue a call to f every n ms, regardless of whether the
queue is being serviced or not: remember: the browser is single-
threaded, and if it happens to be busy for a period of time longer
than n ms, the programmed calls can't/won't be executed yet. But
sooner or later the timer's queue will be serviced again and by then
there might be there hundreds or even thousands of queued calls to f
that will suddenly happen one after the other storm-like in a row
until the queue gets emptied again.

 

[sasuke]

It's not error-prone. It's just that *some* people don't understand
it.

If code sets a setInterval(f, n), the browser will keep pushing into
the timers' queue a call to f every n ms, regardless of whether the
queue is being serviced or not: remember: the browser is single-
threaded, and if it happens to be busy for a period of time longer
than n ms, the programmed calls can't/won't be executed yet. But
sooner or later the timer's queue will be serviced again and by then
there might be there hundreds or even thousands of queued calls to f
that will suddenly happen one after the other storm-like in a row
until the queue gets emptied again.

Ah, thanks for the explanation; this might just explain the erratic
nature of `setInterval'.

/sasuke

 

[Thomas 'PointedEars' Lahn]

Ah, thanks for the explanation; this might just explain the erratic
nature of `setInterval'.

Don't listen to this wannabe.


PointedEars