By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
443,750 Members | 1,471 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 443,750 IT Pros & Developers. It's quick & easy.

How can I be notified when the document load is complet in JavaScript

P: n/a
Hi,

How can I be notified when the document load is complet in JavaScript?
I am referring to the whold document load is complete, mean all
images/external files/frame/iframes have been loaded.

I think there is a window.addEventListener() function but I am not sure
which event to listen to.

Thank you.

Dec 18 '05 #1
Share this Question
Share on Google+
6 Replies


P: n/a
VK

sy*******@gmail.com wrote:
Hi,

How can I be notified when the document load is complet in JavaScript?
I am referring to the whold document load is complete, mean all
images/external files/frame/iframes have been loaded.

I think there is a window.addEventListener() function but I am not sure
which event to listen to.

Thank you.


1. Grey-old way:
<body onload="myFunction()">
Note that this is a real function call so parenthesis are obligatory;
also you can provide some arguments to your function:
<body onload="myFunction('Hello world!')">

2. Up to date the most used one:
<script type="text/javascript">
finction myFunction() {
// ...
}

window.onload = myFunction;
</script>
Note that this is a function *reference* so no parenthesis are allowed;
also you cannot directly provide arguments to your function.

3. High-teched one ;-)
<script type="text/javascript">
finction myFunction() {
// ...
}

if (window.addEventListener) {
// using dis-on'ed event name:
window.addEventListener('load', myFunction, false);
}
else if (window.attachEvent) {
// using on'ed event name:
window.attachEvent('onload', myFunction);
}
else {
// some old crap.
// either use option 2 from above
// or
// alert('Get yourselve a normal browser!');
}
</script>

Also please not that "window.load" event doesn't mean that every single
bit of page is loaded. It can be enbedded "Star Wars" movie on the
page, so the actual loading will be finished an hour or two later.
"window.load" means that DOM structure is fully parsed so you can
reliably address any DOM element on the page by id / name, change src
and other attributes and so on - briefly you are able to script the
loaded page.

Dec 18 '05 #2

P: n/a
VK wrote:
sy*******@gmail.com wrote:
How can I be notified when the document load is complet in JavaScript?
I am referring to the whold document load is complete, mean all
images/external files/frame/iframes have been loaded.

I think there is a window.addEventListener() function but I am not sure
which event to listen to.
[...]
1. Grey-old way:


Nonsense. It is the standards compliant way and the more recent one:
<body onload="myFunction()">
Note that this is a real function call so parenthesis are obligatory;
also you can provide some arguments to your function:
<body onload="myFunction('Hello world!')">

2. Up to date
Nonsense. It is the other way around. `window.onload' has been there in
AOMs before HTML 4.01 where the `onload' attribute and other event handler
attributes were introduced.
the most used one:
Which does not make it in any way more correct. Especially when such a
statement comes from you who has proven not to understand what he is doing.
<script type="text/javascript">
finction myFunction() {
function ...
// ...
}

window.onload = myFunction;
This is the proprietary approach, dating back to IE3/NN3. It also does not
ensure that the document was loaded; it ensures only that the window was
loaded, iff the object referred to by `window' supports an `onload' event
handler property.
</script>
Note that this is a function *reference* so no parenthesis are allowed;
Nonsense. Parantheses, i.e. the Call Operator, are very well allowed here,
but that changed the meaning of that AssignmentExpression as the return
value of the called function would be used then. It is entirely possible
that a function call may return a Function reference.
also you cannot directly provide arguments to your function.
True, however you can indirectly:

window.onload = function(e)
{
myFunction('foo');
}
3. High-teched one ;-)
Nonsense. The first branch is the standards compliant approach to
implement the feature the standards compliant attribute of the `body'
element facilitates, using scripting only:
<script type="text/javascript">
finction myFunction() {
It is still `function'.
// ...
}

if (window.addEventListener) {
// using dis-on'ed event name:
window.addEventListener('load', myFunction, false);
addEventListener() is not a method of Window objects, but of EventTarget
objects, according to the W3C DOM Level 2 Events Specification. The
`load' event there does not apply to Window objects in HTML context,
but to the document, frameset and object element, hence HTMLDocument,
HTMLFramesetElement and HTMLObjectElement objects, where the first one
is usually implemented referred to by the `document' property.

<URL:http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-EventTarget>
<URL:http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-eventgroupings-htmlevents>

And of course the feature detection used here is flawed. So it should be
something more like

function isMethodType(s)
{
return (s == "function" || s == "object");
}

var d;
if (typeof window != "undefined"
&& typeof (d = window.document) != "undefined"
&& isMethodType(typeof d.addEventListener))
{
d.addEventListener('load', myFunction, false);
}
}
else if (window.attachEvent) {
// using on'ed event name:
The main difference is that the former, if it was used correctly, is the
standards compliant approach while attachEvent() is the IE-proprietary one:
window.attachEvent('onload', myFunction);
}
else {
// some old crap.
// either use option 2 from above
// or
// alert('Get yourselve a normal browser!');
More of the usual VK nonsense.
}
</script>

Also please not that "window.load" event doesn't mean that every single
bit of page is loaded. It can be enbedded "Star Wars" movie on the
page, so the actual loading will be finished an hour or two later.
"window.load" means that DOM structure is fully parsed
No, that is exactly what it does not mean.
so you can reliably address any DOM element on the page by id / name,
change src and other attributes and so on - briefly you are able to script
the loaded page.


No, you cannot and you are not reliably then.

Your advice is considered harmful rightfully. Stop pretending
you had a minimum clue about the matters discussed here.
PointedEars
Dec 18 '05 #3

P: n/a
VK
To OP (Original Poster):

Thomas 'PointedEars' Lahn is a local disaster of this *unmoderated*
newgroup.

To see his regular style, informativeness and attitude of the real
newsgroup gurus towards him (I am not one - just another victime) you
may look at recent threads like:
<http://groups.google.com/group/comp.lang.javascript/browse_frm/thread/01dd76b30c37d44c/611fc00508c5dc47#611fc00508c5dc47>

I hope my aswer helped you. If any more questions please do not
hesitate *and do not be scared* to ask.

Dec 18 '05 #4

P: n/a
VK wrote:
To OP (Original Poster):
Private e-mail exists.
Thomas 'PointedEars' Lahn is a local disaster of this *unmoderated*
newgroup.


In a moderated newsgroup, you would hopefully not be allowed to post such
nonsense as you did and repeatedly do, hence it would not be necessary to
correct you.
PointedEars
Dec 18 '05 #5

P: n/a
Thomas 'PointedEars' Lahn said the following on 12/18/2005 12:20 PM:
VK wrote:

To OP (Original Poster):

Private e-mail exists.


This is Usenet PointedHead, learn that. You ask here, you get answered
here.

Thomas 'PointedEars' Lahn is a local disaster of this *unmoderated*
newgroup.

In a moderated newsgroup, you would hopefully not be allowed to post such
nonsense as you did and repeatedly do, hence it would not be necessary to
correct you.


And the same goes for you Thomas.

--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
Dec 18 '05 #6

P: n/a
On 2005-12-18, sy*******@gmail.com <sy*******@gmail.com> wrote:
Hi,

How can I be notified when the document load is complet in JavaScript?
I am referring to the whold document load is complete, mean all
images/external files/frame/iframes have been loaded.

I think there is a window.addEventListener() function but I am not sure
which event to listen to.

Thank you.


listen to all the onloads, when they're all done your page is loaded.

something _like_ this.

<html><head>
<script type="text/javascript">

var items_to_load=4; // this many items to load

function loaded(){
if (--items_to_load) return;
alert("page is completely loaded"); // do this when all is loaded
}

</script>
</head><body onload="loaded()">
<img onload="loaded()" src="gif1.gif">
<img onload="loaded()" src="gif2.gif">
<img onload="loaded()" src="gif3.gif">
</body></html>



--

Bye.
Jasen
Dec 20 '05 #7

This discussion thread is closed

Replies have been disabled for this discussion.