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:


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

查看所有标签

猜你喜欢:

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

30天自制操作系统

30天自制操作系统

[日] 川合秀实 / 周自恒、李黎明、曾祥江、张文旭 / 人民邮电出版社 / 2012-8 / 99.00元

自己编写一个操作系统,是许多程序员的梦想。也许有人曾经挑战过,但因为太难而放弃了。其实你错了,你的失败并不是因为编写操作系统太难,而是因为没有人告诉你那其实是一件很简单的事。那么,你想不想再挑战一次呢? 这是一本兼具趣味性、实用性与学习性的书籍。作者从计算机的构造、汇编语言、C语言开始解说,让你在实践中掌握算法。在这本书的指导下,从零编写所有代码,30天后就可以制作出一个具有窗口系统的32位......一起来看看 《30天自制操作系统》 这本书的介绍吧!

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

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

多种字符组合密码