jquery页面加载完成后执行

jQuery 页面加载完成后执行的方法

在 jQuery 中，确保代码在页面完全加载后执行有多种方式。以下是常见的实现方法：

$(document).ready()

$(document).ready(function() {
    // 页面 DOM 加载完成后执行的代码
});

简写形式

$(function() {
    // 页面 DOM 加载完成后执行的代码
});

window.onload 等效写法

如果需要等待所有资源（如图片）加载完成：

$(window).on('load', function() {
    // 页面所有资源加载完成后执行的代码
});

注意事项

• $(document).ready() 会在 DOM 树构建完成后立即执行，无需等待样式表、图片等外部资源加载
• $(window).on('load') 会等待所有页面资源加载完毕
• 可以在一个页面中使用多个 $(document).ready() 块，它们会按声明顺序执行

现代 JavaScript 替代方案

对于不使用 jQuery 的项目，可以使用原生 JavaScript 的 DOMContentLoaded 事件：

document.addEventListener('DOMContentLoaded', function() {
    // DOM 加载完成后执行的代码
});

这些方法都能确保 JavaScript 代码在页面适当加载阶段执行，避免因 DOM 元素未加载而导致的脚本错误。