javascript - 像“现代 HTML5”浏览器的 $(document).ready() 之类的 Javascript

Question

这很可能已经是某个地方的问题，但我找不到它，因为每次搜索都会出现 jQuery 问题。

我正在寻找一种经过验证的方法来绑定到准备好的文档，就像 jQuery 的$(document).ready(). 然而，这是一个“仅限现代浏览器”的页面，使用非常轻量级的 javascript，我想避免在此处加载 jQuery。

有人会指出我正确的方向吗？

谢谢！

Answer 1

document.addEventListener('DOMContentLoaded', function () {
    /* ... */
});

该事件"DOMContentLoaded"将在文档被完全解析后触发，即没有样式表*和其他图像。如果您需要等待图像和样式表，请"load"改用。

^{* 仅当在<script>之前<link rel="stylesheet" ...>}

Answer 2

window.onload = function() {}是很久以前的标准，虽然它也等待所有图像加载，但对于所有旧浏览器中的某些此类情况，它基本上是一种可行的、功能性的替代方案。用户通常仍应等待一秒钟，直到他做出负责任的行动。

编辑：在我的情况下，我需要它来加载所有在其他任何东西之前加载的库，因为它们在页脚（jquery）中被固定列出。在我的依赖中，只要它被加载，就可以继续使用它。所以恕我直言，用户必须等待的事实是无关紧要的（除非我在这里错过了什么并且可以解释），因为任何方式的 jQuery 加载都是这种情况，直到它没有加载它不能使用它。为了这一点，任何方式都必须进行后端检查，因为客户端 js 可以被“拦截”。等待整个文档加载肯定比在包含它之后使用它要更长的时间，但是这适用于您的情况。不能影响 html 脚本的顺序，例如当您在自己的 3rd 方包中使用它时。