Nodejs开发者看过来：window.onload与jquery中哪个事件对应呢？

Nodejs开发者看过来：window.onload与jquery中哪个事件对应呢？

不是ready，那是什么呢？

4 回复

Node.js 开发者看过来：window.onload 与 jQuery 中哪个事件对应呢？

对于使用 jQuery 的开发者来说，经常会遇到 window.onload 和 jQuery 的 $(document).ready() 这两个概念。虽然这两个事件在功能上有相似之处，但它们并不是完全相同的。

window.onload

window.onload 是一个浏览器的全局事件，它会在页面上的所有资源（包括图片、脚本、样式表等）加载完毕之后触发。这意味着，只有当所有的外部资源都加载完成之后，window.onload 事件才会被触发。

window.onload = function() {
    console.log("所有资源加载完成");
};

$(document).ready()

另一方面，$(document).ready() 是 jQuery 提供的一个方法，用于在 DOM 完全加载后执行代码。这表示 HTML 文档已经解析完成，DOM 树已经构建完毕，但外部资源（如图片和样式表）可能还没有加载完成。

$(document).ready(function() {
    console.log("DOM 已经加载完成");
});

对比与选择

  1. 加载时机：

    • window.onload 等待所有资源加载完成。
    • $(document).ready() 只需要等待 DOM 结构加载完成。

  2. 适用场景：

    • 如果你需要确保所有资源都已经加载完毕再执行某些操作，应该使用 window.onload。
    • 如果你只需要在 DOM 结构准备好后立即执行某些操作，可以使用 $(document).ready()。

  3. 简洁性：

    • 使用 jQuery 的 $(document).ready() 方法更简洁且易于理解，特别是在处理复杂的 DOM 操作时。

示例代码

假设我们有一个简单的 HTML 页面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <h1>Hello World!</h1>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        // 使用 jQuery 的 ready 方法
        $(document).ready(function() {
            console.log("DOM 加载完成");
        });

        // 使用原生 JavaScript 的 onload 方法
        window.onload = function() {
            console.log("所有资源加载完成");
        };
    </script>
</body>
</html>

在这个例子中，你会看到先输出 “DOM 加载完成”，然后输出 “所有资源加载完成”。

总结来说，如果你只是关心 DOM 结构是否加载完成，那么 $(document).ready() 是更好的选择；而如果你需要确保所有外部资源也加载完毕，则应使用 window.onload。


我也不太懂，分享个链接

$(window).load(function(){ });

在Node.js环境中，window.onload 和 jQuery中的事件对应关系并不直接适用，因为Node.js主要运行在服务器端，而window.onload 和 jQuery是用于浏览器端（客户端）的。如果你在浏览器环境中工作，window.onload 等同于jQuery中的 $(document).ready() 或简写为 $(function(){...})。

示例代码如下：

// 使用原生JavaScript
window.onload = function() {
    console.log('页面加载完成');
}

// 使用jQuery
$(document).ready(function(){
    console.log('文档加载完成');
});

// 或者使用简写形式
$(function(){
    console.log('文档加载完成');
});

如果你是在Node.js服务器端开发，并且想要监听某个文件或模块加载完成，可以使用回调函数或Promises来实现类似的效果。例如，你可以监听一个文件的读取完成：

const fs = require('fs');

fs.readFile('./example.txt', 'utf-8', (err, data) => {
    if(err) throw err;
    console.log(data);
});

在这个例子中，fs.readFile 的回调函数会在文件读取完成后执行，类似于浏览器环境中的 window.onload 或 $(document).ready()。

回到顶部