jQuery 页面加载完成即执行的三种方法：$(document).ready、简写与 window.onload 的区别

jQuery 推荐的页面加载执行方式

JQuery 提供了几种标准化的机制，确保在 HTML 文档对象模型（DOM）树构建完成后触发回调函数，而无需等待图片等外部媒体资源。这能显著提升页面的响应速度。

第1步：使用简写形式 $(function)

这是最简洁且最常用的写法。它会在 DOM 就绪后立即执行内部代码块：

$(function(){
    // 添加你的代码，例如绑定点击事件
    $("#a").click(function(){
        // code here
    });
});

第2步：使用完整语法 $(document).ready()

该语句明确声明监听 document 对象的 ready 状态，功能与上述简写完全一致：

$(document).ready(function(){
    $("#a").click(function(){
        // code here
    });
});

为何优先于原生 window.onload？

原生 JavaScript 通常使用 window.onload 来包裹逻辑，但这存在明显的滞后性。为了直观理解差异，我们需要设置以下测试场景：

HTML 结构：

<input type="button" id="a" value="点击">

JS 操作：

// 原生的 window.onload 方式
window.onload = function(){
    $("table tr:nth-child(even)").addClass("even");
};

关键差异解析：

1. window.onload 要求必须等到整个页面，包括所有的图片和外部资源全部下载完成后才执行脚本。如果网络较差或图片较大，用户将长时间面对空白或失效的状态，感觉效果“延迟”甚至未生效。
2. $(document).ready() 仅在浏览器把所有 HTML 放入 DOM tree 结构后即可执行。它不需要等待图片或资源加载，因此在处理表格样式（如隔行变色）、按钮交互等不涉及大资源的动作时，执行效率极高。

总结

在处理基于 DOM 结构的交互逻辑时，应优先选用 $(document).ready() 或其简写形式 $(function())，以避免因资源加载阻塞导致的体验断层。以上关于 jQuery 加载页面的详细内容，更多关于 JavaScript 性能优化的资料请关注本站其它相关文章！