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 = "somefunction" 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 = "somefunction" 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, "somefunction" 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.org/>
[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 _addEventListener(o, sEvent, fListener, bUseCapture)
{
if (o)
{
if (isMethodType(typeof o.addEventListener)
&& isMethodType(typeof fListener))
{
o.addEventListener(sEvent, fListener, !!bUseCapture);
result = true;
}
else if (isMethodType(typeof o.attachEvent)
&& isMethodType(typeof fListener))
{
result = o.attachEvent("on" + sEvent, fListener);
}
else
{
o["on" + sEvent] = fListener;
result = (o["on" + sEvent] == fListener);
}
}
}

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

return false;
}

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

<body ... onload="addEventListenerToImg('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.jpg" onload="notifyObserver(this)"
onerror="notifyObserver(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 = "somefunction" 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, "somefunction" 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.org/>
[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 _addEventListener(o, sEvent, fListener, bUseCapture)
{
if (o)
{
if (isMethodType(typeof o.addEventListener)
&& isMethodType(typeof fListener))
{
o.addEventListener(sEvent, fListener, !!bUseCapture);
result = true;
}
else if (isMethodType(typeof o.attachEvent)
&& isMethodType(typeof fListener))
{
result = o.attachEvent("on" + sEvent, fListener);
}
else
{
o["on" + sEvent] = fListener;
result = (o["on" + sEvent] == fListener);
}
}
}

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

return false;
}

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

<body ... onload="addEventListenerToImg('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 _addEventListener(o, sEvent, fListener, bUseCapture)
{
if (o)
{
if (isMethodType(typeof o.addEventListener)
&& isMethodType(typeof fListener))
{
o.addEventListener(sEvent, fListener, !!bUseCapture);
result = true;
}
else if (isMethodType(typeof o.attachEvent)
&& isMethodType(typeof fListener))
{
result = o.attachEvent("on" + sEvent, fListener);
}
else
{
o["on" + sEvent] = fListener;
result = (o["on" + sEvent] == fListener);
}
}
}

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

return false;
}

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

<body ... onload="addEventListenerToImg('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#ps1Post>
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 _addEventListener(o, sEvent, fListener, bUseCapture)
{
var result = false;

if (o && sEvent && isMethodType(typeof fListener))
{
if (isMethodType(typeof o.addEventListener)
{
o.addEventListener(sEvent, fListener, !!bUseCapture);
result = true;
}
else
{
if (isMethodType(typeof 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 addEventListener() is still not sufficient as
it only tests for existence, not functionality. If someone could come up
with a reliable method to determine if addEventListener() 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.addEventListener('load', ...) for HTMLImageElement 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.dtd" [
<!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.nihonsoft.org/javascript/jsref/doc1.htm#1010842>
[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#Events-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."

[Thomas 'PointedEars' Lahn]

Thomas 'PointedEars' Lahn wrote:

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

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

if (o && sEvent && isMethodType(typeof fListener))
{
if (isMethodType(typeof o.addEventListener) ^ {

Tried and failed :)

[a1eah71]

Thomas 'PointedEars' Lahn wrote:

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 _addEventListener(o, sEvent, fListener, bUseCapture)
{
if (o)
{
if (isMethodType(typeof o.addEventListener)
&& isMethodType(typeof fListener))
{
o.addEventListener(sEvent, fListener, !!bUseCapture);
result = true;
}
else if (isMethodType(typeof o.attachEvent)
&& isMethodType(typeof fListener))
{
result = o.attachEvent("on" + sEvent, fListener);
}
else
{
o["on" + sEvent] = fListener;
result = (o["on" + sEvent] == fListener);
}
}
}

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

return false;
}

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

<body ... onload="addEventListenerToImg('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#ps1Post>

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 ...

Since you have asked, I will take the liberty of asking a dump
question.

Why does the browser allow a call of addEventListenerToImg with three
parameters when the called function specifies four variables?

BTW, your typo did not cause any problems and the modified code worked
on Internet Explorer and only on the initial download with Opera. Since
IE intrinsically supports an onload event in the img tag, the routine
adds little to my page so I decided not to use it.

I would be interested to learn more about html validation and where can
I obtain a validation program of offline use.

Herbert

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 _addEventListener(o, sEvent, fListener, bUseCapture)
{
var result = false;

if (o && sEvent && isMethodType(typeof fListener))
{
if (isMethodType(typeof o.addEventListener)
{
o.addEventListener(sEvent, fListener, !!bUseCapture);
result = true;
}
else
{
if (isMethodType(typeof 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 addEventListener() is still not sufficient as
it only tests for existence, not functionality. If someone could come up
with a reliable method to determine if addEventListener() 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.addEventListener('load', ...) for HTMLImageElement 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.dtd" [
<!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.nihonsoft.org/javascript/jsref/doc1.htm#1010842>
[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#Events-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."

[Thomas 'PointedEars' Lahn]

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

Thomas 'PointedEars' Lahn wrote:

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

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

<URL:http://jibbering.com/faq/faq_notes/pots1.html#ps1Post>
See also the bottom of this posting.

> 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 ...

Since you have asked, I will take the liberty of asking a dump
question.

Why does the browser allow a call of addEventListenerToImg with three
parameters when the called function specifies four variables?

Because in JS/ECMAScript, functions have no fixed arity (and so allow for
trailing optional arguments without additional declaration). Arguments,
including named arguments, that are not passed, are assigned the value
`undefined', and unnamed arguments can be accessed within the method via
`arguments', which refers to an Array-like object.
BTW, your typo did not cause any problems
Impossible. Probably the syntax error was not displayed, but it was there.
<URL:http://jibbering.com/faq/#FAQ4_43>
and the modified code worked on Internet Explorer
OK
and only on the initial download with Opera.
Pardon?
Since IE intrinsically supports an onload event in the img tag,
Still it is not Valid markup and therefore not only the markup is
error-prone but also the scripts that are operating on it. What IE
supports is not a standard you can build interoperable documents on.

To put it bluntly: IEeek can make gold out of every piece of sh*t.
the routine adds little to my page so I decided not to use it.
And you will have to live with that decision.
I would be interested to learn more about html validation
and where can I obtain a validation program of offline use.
HTML Tidy is a validation and/or markup clean-up tool, EclipseTidy is
the respective Eclipse plugin which I use. MyEclipse's HTML Editor
also includes a simple markup validator for HTML, and XML applications.

If you meant instead that you want to validate documents without
uploading them your Web site first, use the Validator's File Upload
feature.
[Full quote]

Do that again and you will be killfiled. You have been warned.
PointedEars

[Thomas 'PointedEars' Lahn]

Thomas 'PointedEars' Lahn wrote:

[...] MyEclipse's HTML Editor also includes a simple
markup validator for HTML, and XML applications.

Should have been:

MyEclipse also includes a simple markup validator for HTML (in the
HTML editor plugins), and XML applications (in the XML editor plugin).
PointedEars