jquery页面加载事件

jQuery 页面加载事件

jQuery 提供了多种方法来检测页面加载完成的事件，以下是几种常见的方式：

使用 $(document).ready()

$(document).ready(function() {
    // 当 DOM 完全加载后执行
    console.log("DOM 已加载");
});

简写形式 $(function())

$(function() {
    // 与 $(document).ready() 等效
    console.log("DOM 已加载");
});

使用 $(window).on('load')

$(window).on('load', function() {
    // 当页面所有资源（如图片、样式表）加载完成后执行
    console.log("页面所有资源已加载");
});

使用原生 JavaScript 的 window.onload

window.onload = function() {
    // 类似于 $(window).on('load')
    console.log("页面所有资源已加载");
};

区别与适用场景

• $(document).ready() 或 $(function()) 会在 DOM 结构加载完成后立即触发，无需等待图片或其他外部资源加载完成。适合需要尽早操作 DOM 的场景。

• $(window).on('load') 或 window.onload 会等待页面所有资源（如图片、样式表、脚本等）加载完成后才触发。适合需要依赖完整页面内容的场景。

  

示例代码

// DOM 加载完成后执行
$(function() {
    console.log("DOM 准备就绪");
});

// 页面所有资源加载完成后执行
$(window).on('load', function() {
    console.log("页面完全加载");
});

注意事项

• 避免同时使用 $(document).ready() 和 $(window).on('load') 处理相同的逻辑，除非明确需要区分执行时机。
• 对于动态加载的内容（如通过 AJAX 加载的 HTML），可能需要额外的事件绑定或回调处理。