Raw JavaScript - domReady() Function

栏目: IT技术 · 发布时间: 4年前

内容简介: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:


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

现代体系结构的优化编译器

现代体系结构的优化编译器

[美] Randy Allen,( / 机械工业出版社 / 2004-1 / 69.00元

现代体系结构的优化编译器,ISBN:9787111141228,作者:(美)Randy Allen,(美)Ken Kennedy著;张兆庆等译;张兆庆译一起来看看 《现代体系结构的优化编译器》 这本书的介绍吧!

随机密码生成器
随机密码生成器

多种字符组合密码

HTML 编码/解码
HTML 编码/解码

HTML 编码/解码

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具