Home > Developer > Web Develop
Page loading completed there are two kinds of events, one is ready, indicating that the document structure has been loaded complete (not including pictures and other non-text media files), the second is onload, indicating that the page contains pictures and other files, all elements are loaded complete. (Can say: ready to load before onload!!!) )
General style control, the chip size control is placed inside the onload loading;
JS Event Trigger method, can be loaded in ready;
A lot of people who use JQ have started writing scripts like this:
The usual notation
In fact, this is the abbreviation of JQ Ready (), which is equivalent to:
Also equals the following method, the default parameter of Jquer is: "Document";
$ (document). The Ready () method vs OnLoad event vs $ (window). Load () method
The first thing you'll learn when contacting jquery is when to start an event. For a long time, events that were raised after loading the page were loaded into the "Body" onload event.
There are a number of drawbacks to the body onload event compared to jquery's Ready method. For example:
Problems with loading multiple functions
<body onload= "A (); B ();" >
</body>
This can only be loaded in the OnLoad event, very ugly ...
In jquery, you can take advantage of multiple jquery.ready () methods, which are executed sequentially in order
Code and content are not separated
This seems to be needless to say, it is repugnant to people-.-!!? Different execution order
For the Body.onload event, it is loaded all the page content before it will be triggered, I mean all content, including pictures, flash, etc. if a lot of these contents of the page will make the user wait for a long time.
For the $ (document). Ready () method, this method is only triggered when all the DOM of the page has been loaded, which undoubtedly speeds up the Web page greatly.
But for some special applications, the magnification of the film is reduced, and the picture is cropped. Need to load all the content of the Web page before executing it? I recommend using the $ (window). Load () method, which will wait until all the pages have been loaded and not be triggered without the drawbacks of the onload event.
The code above will be executed sequentially after all the page contents have been loaded.
Of course, don't forget the corresponding unload method.
The above code is raised when the page is closed.
To throw JS code before all DOM loads
This method is my favorite when debugging, sometimes in the development of the time also use this method
Right, is to use the form of JS closure to embed the JS code body, this code will be automatically executed, of course, you can embed the JS code directly, this way to pay attention to the sequence of problems, as follows:
The first two pieces of code, in the second code, because only the DOM before the current code can be interpreted, and test does not exist in the parsed DOM number. So the second piece of code does not display correctly.
Introduction to JQuery onload and ready concepts and how to use them
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
