当前位置：首页 > jquery

jquery页面加载事件

2026-02-03 22:33:18jquery

jQuery 页面加载事件

在 jQuery 中，页面加载事件可以通过多种方式实现，主要用于在 DOM 完全加载后执行代码。以下是几种常见的方法：

$(document).ready()

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

这种方法会在 DOM 结构加载完成后立即执行，无需等待图片或其他资源加载完成。可以简写为：

$(function() {
    // 简写形式
});

$(window).on('load', handler)

$(window).on('load', function() {
    // 页面所有资源（如图片、脚本等）加载完成后执行
});

这种方法会等待页面所有资源完全加载后触发，适用于需要依赖图片或其他外部资源的情况。

注意事项

$(document).ready() 可以多次调用，所有回调函数会按顺序执行。
$(window).on('load') 会在所有资源加载完成后触发，可能会延迟执行时间。
使用简写形式 $(function() {}) 是常见的最佳实践，代码更简洁。

示例代码

// 方式1: ready()
$(document).ready(function() {
    console.log('DOM 加载完成');
});

// 方式2: 简写
$(function() {
    console.log('DOM 加载完成（简写）');
});

// 方式3: window.on('load')
$(window).on('load', function() {
    console.log('页面所有资源加载完成');
});

选择哪种方式取决于具体需求。如果只需操作 DOM 结构，优先使用 $(document).ready()；如果需要等待资源加载完成，则使用 $(window).on('load')。

jquery页面加载事件