473,722 Members | 2,430 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

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

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.addEvent Listener() function but I am not sure
which event to listen to.

Thank you.

Dec 18 '05 #1
6 2362
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.addEvent Listener() function but I am not sure
which event to listen to.

Thank you.


1. Grey-old way:
<body onload="myFunct ion()">
Note that this is a real function call so parenthesis are obligatory;
also you can provide some arguments to your function:
<body onload="myFunct ion('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.addEven tListener) {
// using dis-on'ed event name:
window.addEvent Listener('load' , myFunction, false);
}
else if (window.attachE vent) {
// using on'ed event name:
window.attachEv ent('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.loa d" 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.loa d" 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
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.addEvent Listener() 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="myFunct ion()">
Note that this is a real function call so parenthesis are obligatory;
also you can provide some arguments to your function:
<body onload="myFunct ion('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 AssignmentExpre ssion 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.addEven tListener) {
// using dis-on'ed event name:
window.addEvent Listener('load' , myFunction, false);
addEventListene r() 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,
HTMLFramesetEle ment and HTMLObjectEleme nt 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#Eve nts-EventTarget>
<URL:http://www.w3.org/TR/DOM-Level-2-Events/events.html#Eve nts-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(ty peof d.addEventListe ner))
{
d.addEventListe ner('load', myFunction, false);
}
}
else if (window.attachE vent) {
// 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.attachEv ent('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.loa d" 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.loa d" 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
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.c om/group/comp.lang.javas cript/browse_frm/thread/01dd76b30c37d44 c/611fc00508c5dc4 7#611fc00508c5d c47>

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
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
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.javas cript FAQ - http://jibbering.com/faq & newsgroup weekly
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
Dec 18 '05 #6
On 2005-12-18, sy*******@gmail .com <sy*******@gmai l.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.addEvent Listener() 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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

1
13587
by: Mat | last post by:
How can I detect when a link has been clicked but the new page is still in the process of loading? The document.location.href property still displays the current location (understandably) not the one that's about to load. I have a page that reloads every 30 seconds in order to access live data. If a user clicks on a link just prior to the page reloading the reload takes precedence over the link click and this is annoying for the users....
3
9841
by: Catherine Lynn Smith | last post by:
I am creating a webpage with dhtml <DIV> layers and I want a link on one layer to modify the content on another but I seem to keep running into errors. Basically I create a layer in the middle of the screen that initially comes up with a gif image of a house: <!-- start "house" layer definition for center of screen --> <DIV id="house" style="position:absolute; left:140px; top:137px; width:510px; height:325px; z-index:2"><img...
2
18351
by: Halldór Ísak Gylfason | last post by:
In my application I have an iframe that is empty (and not visible) initially, however when a user presses a button a form is programmatically submitted and the target is set to the IFrame. I want to detect when the frame has been loaded with the result of the form submit. Of course I have tried some event handlers like onload, onactivate, onreadystatechange, but they do not work in this example. They only seem to work, when the "SRC"...
2
8310
by: Richard Bell | last post by:
Newbie question ... please respond to group I'm trying to open/navigate to a url. How can I tell when the page is fully loaded? Testing suggest that window.open returns before the page is completely loaded and displayed. Likewise, window.navigate. The code looks something like this: wHandle = window.open( url, name, flags ); .... // how to tell when url is fully loaded and displayed
4
2661
by: Jake Lewis | last post by:
I have an HTML page that loads fine including the .js file <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Untitled Document</title> <script language="JavaScript" type="text/JavaScript" src="ve3d.js" ></script> </head>
7
2756
by: Remi Bastide | last post by:
I'm trying to open a blank window and write a message in it. The following page works as expected in IE, but in Firefox the message is not written: <HTML> <HEAD> <TITLE>Document.write bug</TITLE> <Script Language="JavaScript"> function load() { var w = window.open('','','');
3
4005
by: Stevie_mac | last post by:
It might be me but... I dont seem to get a Page_Load event when a opening an ASPX in an iFrame. I do geta Page_Load event when an item on the ASPX (inside the iFrame) is clicked but then IsPostBack=False by now!. The ASPX is opened via client side script (into an iFrame) inside a .HTM file (as ASPX postback causes problems in a modal internet explorer dialog if not in an iFrame!) Anyone know how to get around this - i need to...
13
1688
by: a1eah71 | last post by:
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.
5
4437
by: HopfZ | last post by:
I made two shortcut functions for document.getElementById as: function EBI2(id){return document.getElementById(id)}; var EBI3 = document.getElementById; But EBI3 don't work. EBI2('myText'); //works EBI3('myText'); //unexpected error
0
8863
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
1
9157
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
8052
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
1
6681
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
5995
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
4762
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
3207
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
2
2602
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
3
2147
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.