Pure js alternative to jQuery's ready()
- 高洛峰Original
- 2016-12-06 13:48:551301browse
The
ready method is a method implemented by jQuery that is triggered after the DOM (Document Object Model, Document Object Model) tree is completely loaded in the html page. Because the method it receives is executed only when all DOMs in the page are accessible, so At this point you can completely access and operate elements in html.
Before jQuery 3.0, the typical anonymous function usage was as follows:
$(document).ready(function() {
// 在 .ready() 被触发时执行.
});
Changes of ready() in jQuery 3.0
In jQuery Before the release of 3.0, there are several ways to use the ready method:
On the document object: $(document).ready(handler);
On an empty element: $().ready(handler);
Or use it directly (ie: not on a specified element): $(handler);
The above methods are equivalent. The incoming handler will be executed after all the DOM of the page is loaded, regardless of whether it is Which specified element is executed. That is, calling the ready method on the image element $("img") and the document object does not indicate that the handler needs to be triggered after these elements are loaded, but is triggered after the entire DOM tree is loaded.
In jQuery 3.0, everything except the $(handler); method has been deprecated. The official reason is:
Because this choice has nothing to do with the behavior of the .ready() method, it is inefficient and misleading Users speculate on the behavior of this method. The difference between
Ready and Load events
ready event is triggered after the page DOM is fully loaded and can correctly access the elements. The load event is triggered after the page DOM and resource files (pictures, videos, etc.) ) is triggered after all are loaded. The
load event can be used as follows:
$(window).on("load", function(){
// 当页面所有资源(图片,视频等)全加载完成后才加载执行
});
This will wait for the DOM to be loaded and the image to be loaded (according to the size of the image, it will take a certain amount of time to load).
For regular DOM operations you probably don't need the load event, but if you want to do a loading effect that waits for all resources on the page to be loaded or calculate the size of an image, this should be a good choice.
You may not need jQuery The .ready()
ready method ensures that the code inside it can correctly manipulate DOM elements. What does this mean? When you put JavaScript code into an HTML document it ensures that the code inside the callback function is displayed in the browser Execute when all elements in the page have been loaded:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>.ready() 教程</title>
<script src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script>
$(function(){ // .ready() 的回调方法, 在 DOM 完全加载完后执行
var length = $("p").length;
// 下面会在console控制台中输出 1, 表示有段落 p 存在.
// 这就证明了这个回调方法在 DOM 完全加载完后执行.
console.log(length);
});
</script>
</head>
<body>
<p>I'm the content of this website</p>
</body>
</html>
If you put the JavaScript to be executed at the last position in the body element, you don’t need to wrap the code in it with the ready() method. Because all elements in the page have been loaded when the JavaScript code is executed, you can access or manipulate the elements at this time:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>.ready() 教程</title>
</head>
<body>
<p>I'm the content of this website</p>
<script src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script>
var length = $("p").length;
// 下面会在console控制台中输出 1, 表示有段落 p 存在.
console.log(length);
</script>
</body>
</html>
Use native JavaScript to replace ready()
For modern browsers, and IE9+ , you can listen to the DOMContentLoaded event:
document.addEventListener("DOMContentLoaded", function(){
// 在 DOM 完全加载完后执行
});
Remember here that the callback method will not be executed when the event has been triggered (this event listener is added after the page triggers the event). In order to ensure that the callback function can always be executed, jQuery detects the readyState attribute of the document (reference), and if the detected attribute value is complete, the callback function is executed immediately:
var callback = function(){
// 在 DOM 完全加载完后执行
};
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 below, you can use the onreadystatechange event to detect the readyState attribute of the document:
document.attachEvent("onreadystatechange", function(){
// 检测 DOM 是否加载完全
if(document.readyState === "complete"){
// 为了确保在之后不会再触发 移除事件监听
document.detachEvent("onreadystatechange", arguments.callee);
// 实际处理程序...
}
});
In addition, you can use the load event, like jQuery, so that you can This works correctly in all browsers. This also results in a certain delay as it waits for all resources to be loaded. Remember that in this solution you still have to check the readyState, which, as mentioned above, is In order to ensure that the callback function can also be executed after the event has been triggered.