使用 js 来实现jQuery的 $(document).ready(function(){.... })
方法,该方法又可以简写为 $(function(){.... });
jQuery 中的 $(document).ready()
方法是在网页 DOM 加载完毕后就可以立即执行 JavaScript 代码,相比 window.onload
需要在页面所有资源(css、图片等)加载完毕后才可以执行 JavaScript 代码。
如果页面资源较多的情况下你又想你的 JavaScript 代码执行时间更靠前一点就适合使用。
主角就是使用 DOMContentLoaded
事件:
document.addEventListener("DOMContentLoaded", function() {
console.log("Hello World!");
});
一旦 DOM 加载完毕,DOMContentLoaded
事件就会检测到它并运行。
该事件浏览器兼容情况:“DOMContentLoaded” | Can I use… Support tables for HTML5, CSS3, etc
适用于以下情况:
- 打开网页后有某些功能要立即触发
- 你在
head
元素中的 JavaScript 标签