Image load detectioin

altergothen

unread,

Mar 18, 2004, 4:52:25 PM3/18/04

to

Hi there

Is there a way that JavaScript can detect when an image is fully loaded and
trigger an event when it has?

Thanks.

Lasse Reichstein Nielsen

unread,

Mar 18, 2004, 6:05:37 PM3/18/04

to

"altergothen" <ther...@ananzi.co.za> writes:

> Is there a way that JavaScript can detect when an image is fully loaded and
> trigger an event when it has?

While support is not perfect, the simplest method is the onload event:

It can also be used from scripts:

var img = new Image();
img.onload = function() {reportImgLoaded(this);};
img.src = "dillerdaller.png";

Alternatively, IE has something called "readyState", and, IIRC, a an
event "onReadyStateChange" (or something similar, check MSDN for
details). I have never used it, so I can't say much about it.

/L
--
Lasse Reichstein Nielsen - l...@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'

mscir

unread,

Mar 18, 2004, 9:58:50 PM3/18/04

to

Lasse Reichstein Nielsen wrote:
> "altergothen" <ther...@ananzi.co.za> writes:
>>Is there a way that JavaScript can detect when an image is fully loaded and
>>trigger an event when it has?
>
> While support is not perfect, the simplest method is the onload event:
>
> <img src="dillerdaller.png" onload="reportImgLoaded(this);">
>
> It can also be used from scripts:
>
> var img = new Image();
> img.onload = function() {reportImgLoaded(this);};
> img.src = "dillerdaller.png";
>
> Alternatively, IE has something called "readyState", and, IIRC, a an
> event "onReadyStateChange" (or something similar, check MSDN for
> details). I have never used it, so I can't say much about it.
>
> /L

I got this to work, it's ugly and there's probably a better way, but it
works on my IE6, Netscape 7.1.

<head>
<script type="text/javascript">
var timerID1;
function loadimage(imagesrc, imagename) {
newimage = new Image();
newimage.src = imagesrc;
checkforimage(newimage, imagename);
}
function checkforimage(newimage, imagename) {
if (newimage.complete) {
clearTimeout(timerID1);
document.title="done";
alert('done! '+imagename+' is loaded');
document.images[imagename].src = newimage.src;
return;
}
else {
if (document.title != 'loading: '+imagename+' = '+newimage.src)
document.title='loading: '+imagename+' = '+newimage.src;
}
timerID1=setTimeout(function(){checkforimage(newimage,imagename);},500);
}
</script>
</head>

Richard Cornford

unread,

Mar 19, 2004, 12:03:04 AM3/19/04

to

mscir wrote:
> Lasse Reichstein Nielsen wrote:
<snip>

>> While support is not perfect, the simplest method is
>> the onload event:

<snip>

> I got this to work, it's ugly and there's probably a
> better way, but it works on my IE6, Netscape 7.1.

So that is one version each of two browsers. Probably run locally (from
a local network/http server or the file system) accessing a file that
exists so it will eventually load, and probably do so quickly.

Generally repeatedly executing a setTimeout is inferior to using an
event handler (but did you consider setInterval?). While the onload
events of IMG elements may not be universally reliable they are not that
bad, the onload handlers for Image objects are a bit less reliable but
the - complete - property of images is actually as bad if not worse
overall.

> <head>
> <script type="text/javascript">
> var timerID1;
> function loadimage(imagesrc, imagename) {
> newimage = new Image();
> newimage.src = imagesrc;
> checkforimage(newimage, imagename);
> }
> function checkforimage(newimage, imagename) {
> if (newimage.complete) {

To really test this script you should verify that - newimage.complete -
only becomes true once the image is loaded. If you test that thoroughly
you will find a number of instances where it is true from object
instantiation onwards, and some that do not implement the property at
all. You certainly need to test this with an image that will never load,
and you need some way of killing the process off because if the image
doesn't load (or the implementation never sets - newimage.complete - to
true) the script will just be a needless burden on processor use.

> clearTimeout(timerID1);

On the first execution of this function there is no timeout to clear. On
all subsequent calls it was the setTimeout that called the function and
setTimeout does not repeat so does not need to be cancelled. If you
where using setInterval then clearInterval would make sense upon
completion of the load (or the4 process over-running a reasonable
duration for the test).

> document.title="done";
> alert('done! '+imagename+' is loaded');
> document.images[imagename].src = newimage.src;

<snip>

Reversing the order of those two lines, or removing the alert, might
give a better impression of the success of the process, though the
browser probably would not get a chance to update/re-render the display
until this function returned.

Richard.

mscir

unread,

Mar 19, 2004, 4:13:12 AM3/19/04

to

All good points Richard.

altergothen

unread,

Mar 19, 2004, 7:33:53 PM3/19/04

to

Thanks guys!

"mscir" <ms...@access4less.com.net.org.uk> wrote in message
news:105ledb...@corp.supernews.com...