jquery加载事件

jQuery 加载事件的使用方法

jQuery 提供了多种方法来处理页面加载事件，确保在 DOM 完全加载后执行代码。以下是常见的几种方式：

使用 $(document).ready()

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

简写形式 $()

$(function() {
    // 等同于 $(document).ready()
    console.log("DOM 已加载（简写形式）");
});

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

与 ready 不同，load 事件会等待所有资源（如图片、样式表等）加载完成。

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

区别与适用场景

• $(document).ready() 或 $()：DOM 结构加载完成后立即触发，无需等待外部资源。适合初始化 DOM 操作或绑定事件。
• $(window).on('load')：所有资源加载完成后触发。适合需要操作图片尺寸或依赖外部资源的场景。

示例代码

结合两种事件的典型用法：

// DOM 加载完成后执行
$(function() {
    console.log("DOM 就绪，可操作元素");
});

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

注意事项

• 避免在 ready 事件中执行耗时操作，以免阻塞页面渲染。
• 若需兼容老旧浏览器（如 IE8），推荐使用 $(document).ready() 而非简写形式。

通过合理选择加载事件，可以优化页面性能和用户体验。