jQuery 的 ready()的纯js替代方法

要分析纯js替代jQuery的ready()方法，需要先理解它的作用。

jQuery的ready()方法是在文档载入完成后即可执行。这意味着脚本可以访问到DOM结构，但并不需要等待其他载入事件（如图片）。通常情况下，JavaScript在DOM结构没有完全生成前遇到的元素节点是无法访问的。

为了纯js替代jQuery的ready()方法，我们可以使用DOMContentLoaded事件来检测文档是否已经载入完毕。它是一个针对window对象的Event接口，并已得到Internet Explorer、Opera、Chrome和Firefox等主流浏览器的支持。

一下是一个基于DOMContentLoaded事件的纯js代码实例：

document.addEventListener("DOMContentLoaded", function(){
  // 执行代码
});

上面的代码会在文档载入完成后执行，无需等待其他载入事件。该方法不需要任何框架或库支持。需要注意的是，有些旧版本的浏览器可能会无法支持它，这时可以使用其他的兼容方法。

另一种可靠的方案是使用 window.onload 事件，他是在所有元素的（包括图片）都载入完成后执行的。不同于 DOMContentLoaded 事件， onload 事件是在整张页面树加载完成后才触发，可能会较晚，需要等待更长的时间。以下是一个使用 window.onload 事件的纯JS代码实例：

window.onload = function() {
  // 执行代码
};

这段代码将在文档及其所有资源已完成加载后执行。需要注意的是，如果在window.onload 事件之后添加任何其他资源（如图片或插件）可能会导致延迟。

综上所述，当需要纯JS替代jQuery的ready()方法时，可以选择使用DOMContentLoaded事件或者window.onload事件，根据业务需求来使用其中一种或者两种事件都使用。同时也需要注意不同方法的优缺点，选择适合自己的方法。

示例1：使用DOMContentLoaded事件

<!DOCTYPE html>
<html>
<head>
<script>
document.addEventListener("DOMContentLoaded", function() {
  console.log("文档完整载入！");
});
</script>
</head>
<body>
<p>这是网站的内容。</p>
</body>
</html>

示例2：使用window.onload事件

<!DOCTYPE html>
<html>
<head>
<script>
window.onload = function() {
  console.log("窗口、文档的所有资源加载完成");
};
</script>
</head>
<body>
<p>这是网站的内容。</p>
</body>
</html>

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery 的 ready()的纯js替代方法 - Python技术站

jQuery 的 ready()的纯js替代方法

相关文章