Menu
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:
782
The document. write() method writes a string of text to a document stream opened by document. open() . Note: Because document. write() writes to the document stream, calling document.
Another reason not to use document. write() is it doesn't support XHTML, but its not an issue since most web development uses HTML. Since document. write() fires after a page has finish loading, it causes performance issues and sometimes, may not even fire at all.
The write() method in HTML is used to write some content or JavaScript code in a Document. This method is mostly used for testing purpose. It is used to delete all the content from the HTML document and inserts the new content. It is also used to give the additional text to an output which is open by the document.
Possible situations to use document.write() It seems that the only “approved” time to use document. write() is for third party code to be included (such as ads or Google Analytics). Since document. write() is always available (mostly) it is a good choice for third party vendors to use it to add their scripts.
Simply put, calling document.write() after DOM ready causes it to overwrite the existing DOM.
194
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:
document.write (does not have to call open because document is currently open)document.write
document.write() is outputted into the new documentDOM 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.
24
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
