Testing Image Existence with side-effects

[Charles Harrison Caudill]

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 seem to be impossible. I can, as
nearly as I can tell, run alert and opera.postError (I test on IE, firefox,
and opera by the way). I've tried using the 'this' while in the event
handler, setting this.name, test.name, window.document.getElementById(test's
id).name. I just can't seem to find any means of using side effects inside
the event handler.

Below are several examples of things I've tried so far:

----------------------------------------
var test = new Image();
var id = imageUtils_getUniqueId();
alert("before-> " + window.document.body.childNodes.length);
test.id = id;
test.name = id;
test.onload = function () {window.document.body.appendChild(test);};
test.src = url;
while(!test.complete){}
alert("after-> " + window.document.body.childNodes.length);

alert: before-> 12
alert: after-> 12
yet, the image still shows up on the page...
----------------------------------------

----------------------------------------
var test = new Image();
var didSucceed = false;
test.onload = function () {
didSucceed = true;
alert("load-> " + test.height);
};
test.src = url;
alert("post-> " + test.height);
return didSucceed;

alert: load-> 302
alert: post-> 0
returns false;
----------------------------------------

----------------------------------------
var test = new Image();
test.src = url;
while(!test.complete){}
alert(test.height);

alert: 0
----------------------------------------

----------------------------------------
var test = new Image();
test.id = imageUtils_getUniqueId();
window.document.body.appendChild(test);
test.src = url;
while(!test.complete){}
alert(test.height);

alert: 0
----------------------------------------

Any assistance would be greatly appreciated.

Thank you,
Harrison

 

[alu]

"Charles Harrison Caudill" wrote

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 seem to be impossible. I can, as
nearly as I can tell, run alert and opera.postError (I test on IE, firefox,
and opera by the way). I've tried using the 'this' while in the event
handler, setting this.name, test.name, window.document.getElementById(test's
id).name. I just can't seem to find any means of using side effects inside
the event handler.

Below are several examples of things I've tried so far:

----------------------------------------
var test = new Image();
var id = imageUtils_getUniqueId();
alert("before-> " + window.document.body.childNodes.length);
test.id = id;
test.name = id;
test.onload = function () {window.document.body.appendChild(test);};
test.src = url;
while(!test.complete){}
alert("after-> " + window.document.body.childNodes.length);

alert: before-> 12
alert: after-> 12
yet, the image still shows up on the page...
----------------------------------------

----------------------------------------
var test = new Image();
var didSucceed = false;
test.onload = function () {
didSucceed = true;
alert("load-> " + test.height);
};
test.src = url;
alert("post-> " + test.height);
return didSucceed;

alert: load-> 302
alert: post-> 0
returns false;
----------------------------------------

----------------------------------------
var test = new Image();
test.src = url;
while(!test.complete){}
alert(test.height);

alert: 0
----------------------------------------

----------------------------------------
var test = new Image();
test.id = imageUtils_getUniqueId();
window.document.body.appendChild(test);
test.src = url;
while(!test.complete){}
alert(test.height);

alert: 0
----------------------------------------

Any assistance would be greatly appreciated.

Thank you,
Harrison

Well, I don't know if this is any assistance, but I can at least start an
argument....

I don't think checking for test.complete within a while() loop is a great
idea; the loop process will likely override the image loading attempt,
therefore defeating the purpose.
And of course, before it *is* complete, there is no way to get the height as
a test for existence, as your code suggests.
I probably don't understand your reasoning completely, but the following
test works:

var test = new Image();
test.src = url
window.document.body.appendChild(test);
while(document.images.length < 1){}
alert(document.images.length);

-alu

 

[Harrison Caudill]

I'm afraid it doesn't work. The results are the same if the image
exists or not. The problem is that the image loading process occurs
after the rest of the javascript on the page has been executed.
Consequently the only way I can find to detect the existence of an image
is to write every part of the html necessary after the image detection
needs to occur using javascript by running a

setTimeout('testThenWriteRestOfHTMLOrReschedule()', 10);

or something like that.

Thanks though.

-harrison

PS This site doesn't seem to work properly in Opera. The submit button
doesn't appear.

::shrugs::