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:


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

查看所有标签

猜你喜欢:

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

界面设计模式

界面设计模式

Jenifer Tidwell / 东南大学,O‘Reilly / 2011-5 / 99.00元

尽管目前已经存在了各种各样的用户界面设计工具,设计良好的应用界面仍然不是一件容易的事情。这本畅销书是极少数可以信赖的资料,它能帮助你走出设计选项的迷宫。通过把捕捉到的最佳实践和重用思想体现为设计模式,《界面设计模式》提供了针对常见设计问题的解决方案,这些方案可以被裁减以适用于你的具体情况。本修订版包括了手机应用和社交媒体的模式,以及web应用和桌面软件。每个模式包含了用全彩方式展现的运用技巧,以及......一起来看看 《界面设计模式》 这本书的介绍吧!

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

HTML 编码/解码

URL 编码/解码
URL 编码/解码

URL 编码/解码

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具