Knowing when graphics have loaded

[a1eah71]

I have an application where the user loads graphics from another site.
Presently I advise the user to wait for graphics to load before
clicking on adjustments. Ideally, I would prefer a closed-loop approach
where code would recognize completion of loading and automatically
enable the adjustments. Any ideas on how I can tap into what my browser
knows would be appreciated.

[Thomas 'PointedEars' Lahn]

a1*****@aol.com wrote:

I have an application where the user loads graphics from another site.
Presently I advise the user to wait for graphics to load before
clicking on adjustments. Ideally, I would prefer a closed-loop approach
where code would recognize completion of loading and automatically
enable the adjustments.
No, you would not.
Any ideas on how I can tap into what my browser knows would be
appreciated.

I assume we are talking about HTML 4.01/XHTML 1.0:

Use the `onload' event handler of the `img' element (object). Since
it is non-standard, you will have to assign it to the element when
the `load' event of the `body' element fires (hence use the `onload'
event handlers).
PointedEars

[James Black]

Since the onload event in the body tag is supposedly called when the
images are done loading, couldn't the controls for adjustments be
disabled until the onload function enables them?

[a1eah71]

Thomas 'PointedEars' Lahn wrote:

a1*****@aol.com wrote:

I have an application where the user loads graphics from another site.
Presently I advise the user to wait for graphics to load before
clicking on adjustments. Ideally, I would prefer a closed-loop approach
where code would recognize completion of loading and automatically
enable the adjustments.

No, you would not.

Any ideas on how I can tap into what my browser knows would be
appreciated.

I assume we are talking about HTML 4.01/XHTML 1.0:

Use the `onload' event handler of the `img' element (object). Since
it is non-standard, you will have to assign it to the element when
the `load' event of the `body' element fires (hence use the `onload'
event handlers).
PointedEars

I have found that a onload = "somefuncti on" statement within the img
tag does not fire and assume this is what you mean by the 'onload'
event handler being non- standard? If so then how does one assign a
handler to a specific element?

Herbert

[a1eah71]

James Black wrote:

Since the onload event in the body tag is supposedly called when the
images are done loading, couldn't the controls for adjustments be
disabled until the onload function enables them?

I use the onload event in the body tag to position and size objects on
my page. This works well. After loading, I need to detect when new
images have downloaded. My browser detects this event and changes the
contents of the status bar from the URL to the word, Done. At this
point, I would like code to enabled my controls.

Herbert

[Thomas 'PointedEars' Lahn]

James Black wrote:

Since the onload event in the body tag is supposedly called when the
images are done loading,
No, it is not. The `load' event occurs when the document is loaded,
that is the DOM tree is complete. That does not necessarily include
that all referred resources have loaded.
couldn't the controls for adjustments be disabled until the onload
function enables them?

Since the `load' event does not ensure that the referred resources are
fully loaded, no.
PointedEars

[Thomas 'PointedEars' Lahn]

a1*****@aol.com wrote:

Thomas 'PointedEars' Lahn wrote:

a1*****@aol.com wrote:

> Any ideas on how I can tap into what my browser knows would be
> appreciated.
I assume we are talking about HTML 4.01/XHTML 1.0:

Use the `onload' event handler of the `img' element (object). Since
it is non-standard, you will have to assign it to the element when
the `load' event of the `body' element fires (hence use the `onload'
event handlers).
[...]

I have found that a onload = "somefuncti on" statement within the img
tag does not fire and assume this is what you mean by the 'onload'
event handler being non- standard?

If you have otherwise Valid markup, "somefuncti on" represents a function
_call_ to a declared function ["bar()"] and no script error occurs[2],
then yes. I have observed that the `onload' event handler attribute for
the `img' element is supported by some browsers, yet the resulting markup
is still not Valid HTML.

[1] <URL:http://validator.w3.or g/>
[2] <URL:http://jibbering.com/faq/#FAQ4_43>
If so then how does one assign a handler to a specific element?

Use the `onload' event handler of the `body' element. Quickhack:

<head>
...
<meta http-equiv="Content-Script-Type" content="text/javascript">
...
<script type="text/javascript">
function isMethodType(s)
{
return (s == "function" || s == "object");
}

function _addEventListen er(o, sEvent, fListener, bUseCapture)
{
if (o)
{
if (isMethodType(t ypeof o.addEventListe ner)
&& isMethodType(ty peof fListener))
{
o.addEventListe ner(sEvent, fListener, !!bUseCapture);
result = true;
}
else if (isMethodType(t ypeof o.attachEvent)
&& isMethodType(ty peof fListener))
{
result = o.attachEvent(" on" + sEvent, fListener);
}
else
{
o["on" + sEvent] = fListener;
result = (o["on" + sEvent] == fListener);
}
}
}

function addEventListene rToImg(sName, sEvent, fListener, bUseCapture)
{
var img;
if (typeof document != "undefined"
&& document.images
&& (img = document.images[sName]))
{
return _addEventListen er(img, sEvent, fListener, bUseCapture);
}

return false;
}

function bar()
{
// ...
}
</script>
...
</head>

<body ... onload="addEven tListenerToImg( 'foo', 'load', bar);">
...
<img ... name="foo">
...
</body>
PointedEars

[VK]

a1*****@aol.com wrote:

James Black wrote:

Since the onload event in the body tag is supposedly called when the
images are done loading, couldn't the controls for adjustments be
disabled until the onload function enables them?

I use the onload event in the body tag to position and size objects on
my page. This works well. After loading, I need to detect when new
images have downloaded. My browser detects this event and changes the
contents of the status bar from the URL to the word, Done. At this
point, I would like code to enabled my controls.

So there is the problem??
Any browser since Netscape 3.0 supports onload / onerror handlers for
images. So simply
<img src="nyImage.jp g" onload="notifyO bserver(this)"
onerror="notify Observer(this)" >

With regular security limitations of course: you're not getting events
from frame/iframe from another domain; also recent browsers (like
Firefox) may be set to block download of images from another domains.
Also on older browsers animated GIF's may trig "load" event on each
animation loop. Otherwise there are no problems whatsoever. Unless
there are extra circumstances?

[a1eah71]

Thomas 'PointedEars' Lahn wrote:

a1*****@aol.com wrote:

Thomas 'PointedEars' Lahn wrote:

a1*****@aol.com wrote:
> Any ideas on how I can tap into what my browser knows would be
> appreciated.

I assume we are talking about HTML 4.01/XHTML 1.0:

Use the `onload' event handler of the `img' element (object). Since
it is non-standard, you will have to assign it to the element when
the `load' event of the `body' element fires (hence use the `onload'
event handlers).
[...]

I have found that a onload = "somefuncti on" statement within the img
tag does not fire and assume this is what you mean by the 'onload'
event handler being non- standard?

If you have otherwise Valid markup, "somefuncti on" represents a function
_call_ to a declared function ["bar()"] and no script error occurs[2],
then yes. I have observed that the `onload' event handler attribute for
the `img' element is supported by some browsers, yet the resulting markup
is still not Valid HTML.

[1] <URL:http://validator.w3.or g/>
[2] <URL:http://jibbering.com/faq/#FAQ4_43>

If so then how does one assign a handler to a specific element?

Use the `onload' event handler of the `body' element. Quickhack:

<head>
...
<meta http-equiv="Content-Script-Type" content="text/javascript">
...
<script type="text/javascript">
function isMethodType(s)
{
return (s == "function" || s == "object");
}

function _addEventListen er(o, sEvent, fListener, bUseCapture)
{
if (o)
{
if (isMethodType(t ypeof o.addEventListe ner)
&& isMethodType(ty peof fListener))
{
o.addEventListe ner(sEvent, fListener, !!bUseCapture);
result = true;
}
else if (isMethodType(t ypeof o.attachEvent)
&& isMethodType(ty peof fListener))
{
result = o.attachEvent(" on" + sEvent, fListener);
}
else
{
o["on" + sEvent] = fListener;
result = (o["on" + sEvent] == fListener);
}
}
}

function addEventListene rToImg(sName, sEvent, fListener, bUseCapture)
{
var img;
if (typeof document != "undefined"
&& document.images
&& (img = document.images[sName]))
{
return _addEventListen er(img, sEvent, fListener, bUseCapture);
}

return false;
}

function bar()
{
// ...
}
</script>
...
</head>

<body ... onload="addEven tListenerToImg( 'foo', 'load', bar);">
...
<img ... name="foo">
...
</body>
PointedEars

I thank you for the code. It works fine for IE 6.0 and when I figure
out how it works then perhaps I could get the code to work with my
Opera and Netscape browsers.

Herbert

[Thomas 'PointedEars' Lahn]

a1*****@aol.com wrote:

Thomas 'PointedEars' Lahn wrote:
[...]

Use the `onload' event handler of the `body' element. Quickhack:

<head>
...
<meta http-equiv="Content-Script-Type" content="text/javascript">
...
<script type="text/javascript">
function isMethodType(s)
{
return (s == "function" || s == "object");
}

function _addEventListen er(o, sEvent, fListener, bUseCapture)
{
if (o)
{
if (isMethodType(t ypeof o.addEventListe ner)
&& isMethodType(ty peof fListener))
{
o.addEventListe ner(sEvent, fListener, !!bUseCapture);
result = true;
}
else if (isMethodType(t ypeof o.attachEvent)
&& isMethodType(ty peof fListener))
{
result = o.attachEvent(" on" + sEvent, fListener);
}
else
{
o["on" + sEvent] = fListener;
result = (o["on" + sEvent] == fListener);
}
}
}

function addEventListene rToImg(sName, sEvent, fListener,
bUseCapture)
{
var img;
if (typeof document != "undefined"
&& document.images
&& (img = document.images[sName]))
{
return _addEventListen er(img, sEvent, fListener, bUseCapture);
}

return false;
}

function bar()
{
// ...
}
</script>
...
</head>

<body ... onload="addEven tListenerToImg( 'foo', 'load', bar);">
...
<img ... name="foo">
...
</body> [...]

Please trim your quotes to the minimum required for retaining the context.

<URL:http://jibbering.com/faq/faq_notes/pots1.html#ps1P ost>
I thank you for the code. It works fine for IE 6.0 and when I figure
out how it works
Why, you could ask its author ...

It is fairly simple: when the `load' event of the `body' element fires,
the `img' element named "foo" is added an event listener for its `load'
event, where several approaches to do so are feature-tested and the
first positive tested feature is used[0]. That event listener, `bar',
is called when the `img' element's `load' event fires.

[0] Therefore, an attempt at improving its efficiency and reliability:

function _addEventListen er(o, sEvent, fListener, bUseCapture)
{
var result = false;

if (o && sEvent && isMethodType(ty peof fListener))
{
if (isMethodType(t ypeof o.addEventListe ner)
{
o.addEventListe ner(sEvent, fListener, !!bUseCapture);
result = true;
}
else
{
if (isMethodType(t ypeof o.attachEvent))
{
result = o.attachEvent(" on" + sEvent, fListener);
}

if (!result)
{
o["on" + sEvent] = fListener;
result = (o["on" + sEvent] == fListener);
}
}
}

return result;
}

Note that the feature test for addEventListene r() is still not sufficient as
it only tests for existence, not functionality. If someone could come up
with a reliable method to determine if addEventListene r() was successful
(since it does not have a return value or exception specified), that would
make this approach less error-prone.
then perhaps I could get the code to work with my Opera and Netscape
browsers.
And what exactly does not work there?

The code does work with Netscape (presumably 2.0+[1], tested with [2],
[3] and [4]), and Opera[5]. (However, it should be noted that in
Netscape 4.8 and animated GIFs, the `onload' handler is triggered
there every time the animation loops.) Opera even supports
elemObjRef.addE ventListener('l oad', ...) for HTMLImageElemen t objects
referred to by `elemObjRef', although there is no such event for `img'
elements according to W3C DOM Level 2 Events 1.0; ISTM it is implementing
W3C WG Note W3C DOM Level 3 Events 1.0 here, where the event applies to
such elements, being "a resource linked from the document."[6]

What you may encounter, of course, is that bar() will not be called on
creation of the `img' element if the `load' event of the `img' element
fired before the `load' event of the `body' element fires. The above
approach works quite reliably only if you want to handle `src' attribute
changes to the `img' element after it was first loaded.

I am not sure if there is always a viable workaround for that. A possible
workaround without invalid HTML would probably be to try to add the event
listener for the `load' event of the `img' element right after if was
included or at the end of the document's body element.

A possible workaround with Valid XHTML could be to augment the XHTML
DTD with the `onload' attribute for the `img' element, such as

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt d" [
<!ATTLIST img
onload CDATA #IMPLIED

]>

I have tested the former successfully in Netscape 4.8+, Firefox 1.5 and
Opera 8.51, and the latter (XHTML) successfully in Netscape 6.2.3+ (see
footnotes) and Firefox 1.5 using Gecko's XML parser (by serving
application/xhtml+xml).

What was most interesting to me when pursuing the latter approach is that
XML 1.0, which is used to define XHTML 1.0, explicitly allows the
latter[7], so it is indeed Valid markup and does not break the DTD
declaration. And there is also a disturbing fact: Even though the XHTML
1.0 Transitional DTD does not declare the `onload' attribute for the `img'
element, Gecko's XML parser in Standards Compliance Mode does not find
anything not well-formed with the markup when I omit the above ATTLIST
declaration; the W3C Markup Validator does.

Of course, a possible workaround with invalid HTML is to use the `onload'
attribute of the `img' element anyway, but I recommend against that.
HTH

PointedEars
___________
[1] <URL:http://research.nihons oft.org/javascript/jsref/doc1.htm#101084 2>
[2] Mozilla/4.8 [en] (X11; U; Linux 2.6.14.4-20051220.153223 +0100 i686)
[3] Mozilla/5.0 (X11; U; Linux i686; en-US; rv:0.9.4.1) Gecko/20020508
Netscape6/6.2.3
[4] Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.7.2) Gecko/20040805
Netscape/7.2
[5] Opera/8.51 (X11; Linux i686; U; en)
[6]
<URL:http://www.w3.org/TR/DOM-Level-3-Events/events.html#Eve nts-eventgroupings-htmlevents>
[7] <URL:http://www.w3.org/TR/REC-xml/#NT-doctypedecl>
<URL:http://www.w3.org/TR/REC-xml/#NT-AttlistDecl>
"When more than one AttlistDecl is provided for a given element type,
the contents of all those provided are merged."