使用js来实现jQuery的document.ready()方法

使用 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 标签

参考：JavaScript document.ready() 的用法 (freecodecamp.org)