首页  >  文章  >  web前端  >  如何在不使用 jQuery 的情况下实现 $(document).ready() 的功能?

如何在不使用 jQuery 的情况下实现 $(document).ready() 的功能?

Susan Sarandon
Susan Sarandon原创
2024-11-06 07:06:02195浏览

How Can I Achieve the Functionality of $(document).ready() Without Using jQuery?

相当于没有 jQuery 的 $(document).ready()

jQuery 中的 $(document).ready() 函数是一个在执行回调之前等待 DOM 加载的事件处理程序。如果您不使用 jQuery,则可以使用以下代码片段实现相同的效果:

document.addEventListener("DOMContentLoaded", function() {
  // code...
});

此方法将侦听器附加到“DOMContentLoaded”事件,该事件在 DOM 树加载时触发已加载(不包括图像等外部资源)。

与 window.onload 的差异

需要注意的是,window.onload 的行为与 $(document) 不完全相同。准备好()。 window.onload 等待 DOM 加载以及所有元素完成加载,而 $(document).ready() 仅等待 DOM 加载。如果您的脚本依赖于存在的 DOM 元素,尤其是在处理外部资源时,这一点可能很重要。

IE8 及更早版本

对于低于以下版本的浏览器IE9,可以使用以下代码片段:

document.onreadystatechange = function () {
    if (document.readyState == "interactive") {
        // Initialize your application or run some code.
    }
}

此代码检查文档的“交互”状态,这表明 DOM 树已加载,但外部资源可能仍在加载。

以上是如何在不使用 jQuery 的情况下实现 $(document).ready() 的功能?的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn