无 jQuery 实现 $(document).ready 等效功能

无 jQuery 实现 $(document).ready 等效功能

技术背景

在前端开发中，$(document).ready() 是 jQuery 提供的一个非常实用的方法，用于在文档的 DOM 完全加载后执行代码。然而，在某些情况下，我们可能不想引入 jQuery 库，或者需要在不依赖 jQuery 的环境中实现相同的功能。因此，需要找到标准的替代方案来实现文档就绪时执行代码的功能。

实现步骤

1. 使用 DOMContentLoaded 事件

DOMContentLoaded 是一个标准的事件，当 HTML 文档被完全加载和解析完成后，会触发该事件，而无需等待样式表、图像和子框架的加载。大多数现代浏览器都支持该事件，但不包括 IE8。

1
2
3
document.addEventListener("DOMContentLoaded", function(event) { 
    // 在这里编写需要执行的代码
});

2. 兼容旧浏览器的实现

为了兼容旧浏览器（如 IE8），可以结合 document.readyState 属性和 onreadystatechange 事件来实现。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function ready(callback) {
    // 如果文档已经渲染完成
    if (document.readyState!='loading') callback();
    // 现代浏览器
    else if (document.addEventListener) document.addEventListener('DOMContentLoaded', callback);
    // IE <= 8
    else document.attachEvent('onreadystatechange', function(){
        if (document.readyState=='complete') callback();
    });
}

ready(function(){
    // 在这里编写需要执行的代码
});

3. 使用 defer 属性

在 HTML5 中，<script> 标签有一个 defer 属性，它指定脚本在页面解析完成后执行，这也可以达到类似 $(document).ready() 的效果。

1
2
3
4
5
6
7
8
9
<!doctype html>
<html>
<head>
  <script src="/script.js" defer></script>
</head>
<body>
  <p>使用 defer 属性让脚本在页面解析完成后执行。</p>
</body>
</html>

核心代码

简洁实现

1
2
3
4
const ready = fn => document.readyState!== 'loading'? fn() : document.addEventListener('DOMContentLoaded', fn);
ready(function(){
    console.log("hello world");
});

兼容多浏览器的实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function ready(callback) {
    if (document.readyState!== 'loading') {
        callback();
    } else if (document.addEventListener) {
        document.addEventListener('DOMContentLoaded', callback);
    } else {
        document.attachEvent('onreadystatechange', function() {
            if (document.readyState!== 'loading') {
                callback();
            }
        });
    }
}

ready(function() {
    // 执行代码
});

最佳实践

  • 优先使用 DOMContentLoaded：在支持的浏览器中，优先使用 DOMContentLoaded 事件，因为它比 window.onload 更快，不需要等待所有资源加载完成。
  • 兼容旧浏览器：如果需要兼容旧浏览器（如 IE8），可以使用上述的兼容代码。
  • 使用 defer 属性：在现代浏览器中，使用 <script> 标签的 defer 属性可以简化代码，提高性能。

常见问题

1. DOMContentLoaded 和 window.onload 的区别

DOMContentLoaded 事件在 HTML 文档被完全加载和解析完成后触发，而 window.onload 事件在页面的所有资源（包括图像、样式表等）加载完成后触发。因此，DOMContentLoaded 通常比 window.onload 更快。

2. 代码在旧浏览器中不工作

如果代码在旧浏览器中不工作，可能是因为不支持 DOMContentLoaded 事件。可以使用上述的兼容代码，结合 document.readyState 和 onreadystatechange 事件来解决。

3. 动态插入的脚本

如果脚本是动态插入的，可能会出现文档已经加载完成，但 DOMContentLoaded 事件已经触发的情况。可以在插入脚本时检查 document.readyState 属性，如果文档已经加载完成，则直接执行代码。

前端开发 > JavaScript 应用
#前端开发 #JavaScript #jQuery #DOMContentLoaded #文档就绪事件
无 jQuery 实现 $(document).ready 等效功能
https://119291.xyz/posts/2025-05-14.equivalent-of-document-ready-without-jquery/
作者
ww
发布于
2025年5月14日
许可协议