Enter the URL address in the browser address bar, when the browser starts loading the page, there are several procedures
1. The browser begins parsing the HTML document
2. The browser encounters the <script> element in the HTML document and the CSS style file, and does not have an async or defer attribute, pauses parsing, starts executing scripts and CSS styles
3. HTML Document parsing completed
4. The browser waits for external resources such as pictures, style sheets, font files to be loaded.
In this, there are two stages:
Ready, indicating that the document structure has been loaded (not including non-text media files such as pictures);
Load, which indicates that all elements, including external files such as pictures, are loaded and completed.
DOM Ready
Strictly speaking, ready is not an event in the DOM, just because there is a ready () method in jquery, which executes before the page HTML document is parsed and the media file such as the picture is loaded.
This is usually the case with jquery plugins.
$ (function() { //dosomething alert (' Something finished! ')});In fact, this is the shorthand for jquery Ready (), which is equivalent to
$ (document). Ready (function() { //something alert (' Something finished! ')})The method of this jquery ready () is Dom , and his role is to manipulate the DOM before the loading of external files such as pictures after the DOM is loaded.
You can use the Domcontentloaded event to determine the ready state of the DOM without using jquery.
function () { //dosomething alert (' Something finished! ')});It indicates that the domcontentloaded event is being monitored on the document node, and this event is triggered once the DOM in document finishes loading.
IE8 does not support domcontentloaded events, so you can use the ReadyStateChange event in an earlier version of the browser, with the same effect.
function () { if (document.readystate = = "interactive") {//do Something alert (' Something finished! ') }}Where the Document.readystate property returns the status of the current document, there are three possible values.
-Loading: Loading the HTML code phase (parsing not yet completed)
-Interactive: When loading an external resource phase
-Complete: When loading is completed
Dom Load
The DOM triggers the Load event when the full load is complete, and if you want to do something, you can write it like this.
window.onload=function() { //dosomething alert (' Something finished! ')}Note that you should not write document.onload, because in most browsers, listening on the Load event on the document is not valid and should be monitored on the window.
Using the jquery notation
$ (window). Load (function() { //dosomething alert (' Something finished! ')})This is DOM load, and his role is to trigger after all other external files, such as the DOM and the pictures, are loaded.
Consider what window the following code will pop up as it executes.
<script>window.onload=function() { alert (' Load finished! ')}document.addeventlistener (' domcontentloaded ',function() { alert (' Ready finished! ')}</script><body>Reference:
Https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload
Https://www.w3.org/TR/html5/syntax.html#the-end
JavaScript Standard Reference Tutorial http://javascript.ruanyifeng.com/dom/document.html
The difference between ready and load during DOM loading
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
