I'm experimenting with write method & onload event. Here is my code:
<!DOCTYPE html>
<html>
<head>
</head>
<body onload="document.write('body loaded!')">
<h1>Hello World!</h1>
<img onload="document.write('img loadeld!')" src="smiley.gif" alt="Smiley face" width="42" height="42" />
</body>
</html>
If i run this in browser it outputs "img loadeld" and just "hangs", seems to be loading the page infinitely. I expected the browser outputs "img loadeld" and then as the body element is ready "body loaded" and just stops as normally.
My questions:
- Why is there such a hang? Why the onload event on img element blocks the browser from continuing & rendering "body loaded"?
- Why if i remove onload handler from img element the reponse is as expected - "body loaded" and the page isn't blocked.
I'm experimenting with write method & onload event. Here is my code:
<!DOCTYPE html>
<html>
<head>
</head>
<body onload="document.write('body loaded!')">
<h1>Hello World!</h1>
<img onload="document.write('img loadeld!')" src="smiley.gif" alt="Smiley face" width="42" height="42" />
</body>
</html>
If i run this in browser it outputs "img loadeld" and just "hangs", seems to be loading the page infinitely. I expected the browser outputs "img loadeld" and then as the body element is ready "body loaded" and just stops as normally.
My questions:
- Why is there such a hang? Why the onload event on img element blocks the browser from continuing & rendering "body loaded"?
- Why if i remove onload handler from img element the reponse is as expected - "body loaded" and the page isn't blocked.
-
Thanks for Your answer:-) 1.) So body onload event occurs BEFORE document has been closed and it's closed & no loading spinner therefore. I'am i right? So why when i use such a code:
<body onload="alert('body loaded!')"> <h1>Hello World!</h1> <img onload="alert('img loadeld!')" ... /> </body>the first alert is "img loadeld" NOT "body loaded" ??? 2.) Why do i have to explicitly call document close after the image is loaded while i haven't done that after body onload="document.write? If the event is automatically performed in the last case (body onload)? – Mulligan Commented Sep 12, 2012 at 7:05
5 Answers
Reset to default 3Simply put, calling document.write() after DOM ready causes it to overwrite the existing DOM.
Everything is working correctly (though not as you expected), and nothing is "hanging" or "blocking." It's all happening so fast, however, that it does not appear as such. Hopefully an explanation of the workings of writing to the document and the order of events will assist you:
Your IMG onload event fires after the document has been closed (document ready has been reached).
document.write(), however, can only output to an open document.
If a document has been closed, document.write() (docs) implicitly calls document.open() (docs) which wipes the entire document. Your call to write then outputs what you told it to. The document remains open until it is explicitly closed (document.close() (docs)), so the "loading spinner" continues to show.
The basic flow of operations, then, which is taking place (so quickly that you don't notice it all happening and things look broken) is:
- page request made
- page response received
- document is opened, content is parsed and put into place, including the first
document.write(does not have to call open because document is currently open) - document closes
- Retrieval for the IMG tag pletes and the event fires
- event handler calls
document.write - document is implicitly re-opened (new doc created, all content lost; loading spinner displayed)
- your argument to
document.write()is outputted into the new document - everything is plete, document is still open
DOM manipulation techniques (appendChild(), writting to innerHTML, etc) should be used Instead of document.write in order to modify existing content without overwriting everything.
The good news in this is that since this is happening, you do know that your image is loading successfully. You just gotta work out the right way to react to it as I eluded to earlier.
That's because document.write() clears the entire document, and then writes the argument to the page, try document.writeln('Img loaded'); to append to the body, but to stick to what you really want:
<img onload="document.body.innerHTML += '<h1>Loaded</h1>'"'
Or write a function that creates an element and use document.body.appendChild(elem), in which case you can replace document.body with any block element
Create a message container, such as a DIV and set the innerHTML, don't use .write()
When document.write used inside of function after html is loaded, it writes to new html document.
onload is an event handler, so <img onload="document.write('img loadeld!')"/> = img.onload = function(event){document.write('img loadeld!');}.
It not blocks page loading, it just creates new blank html document.