ready The method is a method that is implemented by JQuery when the HTML page is fully loaded after the DOM (Document Object Model) tree is complete. Because the method it receives is only executed when all the DOM in the page is accessible, you can access and manipulate the elements in HTML at this time.
Before JQuery 3.0, the typical way to use anonymous functions is as follows:
$ (document). Ready (function () {
//execute when. Ready () is triggered.
});
Changes in Ready () in JQuery 3.0
Before the JQuery 3.0 release, there are several ways to use the following ready methods:
On the Document object:$(document).ready(handler);
On an empty element:$().ready(handler);
or used directly (i.e., not on a specified element): $ (handler);
Several of the above methods are equivalent. The incoming handler is executed after all of the page's DOM is loaded, regardless of which specified element is executed. That is, the call to the Ready method on the Image element $ ("img") and the Document object does not indicate that the handler is triggered after the elements have been loaded, but only after the entire DOM tree has finished loading.
In JQuery 3.0, except $ (handler); Methods the rest were discarded. The official reasons are:
Because this choice has nothing to do with the behavior of the. Ready () method, it is inefficient and can mislead users into guessing the behavior of the method.
Different points of Ready and Load events
The Ready event triggers and accesses the element correctly after the page DOM is fully loaded. The Load event is not triggered until the page DOM and resource files (pictures, videos, etc.) are loaded.
The Load event can be used as follows:
$ (window). On ("Load", function () {
//when all the resources (pictures, videos, etc.) of the page are loaded to complete before loading the execution
});
This waits for the DOM to be loaded and the picture is loaded (depending on the size of the picture, a certain amount of time needs to be loaded).
You probably don't need the load event for regular DOM operations, but this should be a good choice if you want to do a load effect that waits for all the resources on the page to load or calculate the size of the picture.
You may not need Jquery.ready ()
The Ready method ensures that the internal code is able to manipulate the DOM element correctly. What does that mean? When you place JavaScript code in an HTML document, it ensures that the code in the callback function executes when the browser is loading all the elements in the page:
<!doctype html>
If you put JavaScript into the final position within the BODY element, you don't need to use the ready () method to wrap the code inside, because all the elements in the page are loaded when the JavaScript code executes, so you can access or manipulate the elements at this point:
<!doctype html>
Replace ready with native JavaScript ()
For modern browsers, as well as ie9+, you can monitor domcontentloaded events:
Document.addeventlistener ("domcontentloaded", function () {
//execute after DOM is fully loaded
);
Remember here that the callback method does not execute after the event has been triggered (this event is not added after the page triggers the event). To ensure that the callback function always executes, JQuery detects the document's ReadyState attribute (reference) and executes the callback function immediately if the detected property value is complete:
var callback = function () {
//execute after DOM is completely loaded
;
if (
document.readystate = = "complete" | |
(Document.readystate!== "Loading" &&!document.documentelement.doscroll)
) {
callback ();
} else {
Document.addeventlistener ("domcontentloaded", callback);
}
You should always remember to introduce the Domready library, which has already implemented this solution.
Older versions of IE
For IE8 and the following versions, you can use the onReadyStateChange event to detect the ReadyState property of the document:
Document.attachevent ("onReadyStateChange", function () {
//detect whether DOM loads full
if (document.readystate = = " Complete ") {
//to ensure that the removal event is not triggered after the listener
document.detachevent (" onreadystatechange ", Arguments.callee);
Actual handler ...
}
);
In addition you can use the Load event, like JQuery, so that it can be executed correctly in all browsers. This also leads to a certain time delay because it will wait for all the resources to be loaded and completed. Remember that in this solution you still have to detect readyState, as described above, to ensure that the callback function can be executed once the event has been triggered.
Conclusion
If you are looking for a native JavaScript to replace the Ready method you can solve it by domcontentloaded events. If your system needs to support IE then you need to make sure that the DOM is loaded completely!
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
