内容简介:Sometimes you may want to know if the DOM is ready to be manipulated. Most of the time you want to run some code only after the DOM is ready to be modified. For that reason for years we usedThe following will always print to the JS console even if the DO
Sometimes you may want to know if the DOM is ready to be manipulated. Most of the time you want to run some code only after the DOM is ready to be modified. For that reason for years we used
jQuery’s ready()
function or some equivalent. Now many have moved on and like to use plain old JavaScript to do everything without libraries. Still, a major benefit of using jQuery(…).ready()
is that even if the document
(or window
‘s) DOMContentLoaded
event already fired, the function passed will still be run.
The following will always print to the JS console even if the DOM was fully parsed long ago:
jQuery(function() { console.log('The DOM is ready!'); });
On the other hand, the following will only print to the JS console if the DOM is not fully parsed at the time when the event listener is added:
addEventListener('DOMContentLoaded', function() { console.log('The DOM is ready!'); });
A Simple Solution
The solution to this problem is to test to see if the DOMContentLoaded
event would have possibly fired already and then call the function immediately. With this in mind you could use the following code to essentially do the same thing that jQuery does but without needing jQuery:
Here is an example showing how to use this function:
domReady(function() { console.log('The DOM is ready!'); });
If you just want to determine if the DOM is currently ready you can also call it this way:
if (domReady()) { console.log('The DOM is ready!'); } else { console.log('The DOM is not ready yet.'); }
You can even determine if the code is being called right away from within the function call by doing something like this:
domReady(function(event) { console.log('This is ' + (event ? 'a delayed' : 'an immediate') + ' call.'); });
Legacy Solution
If you would like to use this domReady()
function but you need to support legacy browsers such as IE8 or lower then you can use the following definition:
The function is called the same way. The only difference is that the readystatechange
event is being targeted instead of the DOMContentLoaded
.
Final Words
Honestly, there are still other reasons why you may decide to use libraries such as jQuery which already provide this functionality. On the other hand, feel free to use this function if you want to minimize your code base. As always, happy coding! :sunglasses:
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。