jquery加载事件

jQuery 加载事件

jQuery 提供了多种方法来处理页面或元素的加载事件。以下是常见的几种方式：

使用 $(document).ready()

这是最常用的方法，确保 DOM 完全加载后执行代码，但无需等待图片或其他资源加载完成。

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

简写形式：

$(function() {
    // 简化的 ready 事件写法
});

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

如果需要等待页面所有资源（如图片、脚本等）完全加载，可以使用 window 的 load 事件。

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

动态加载内容的事件绑定

对于动态加载的内容（如通过 AJAX 加载），可以使用事件委托或重新绑定事件。

$(document).on('click', '.dynamic-element', function() {
    // 动态加载元素的点击事件
});

图片加载事件

单独监听图片的加载完成事件。

$('img').on('load', function() {
    // 图片加载完成后执行的代码
}).each(function() {
    if (this.complete) $(this).trigger('load');
});

注意事项

• $(document).ready() 比 window.onload 更快触发，因为后者需等待所有资源加载。
• 动态加载的内容需使用事件委托或重新绑定事件。
• 多次调用 $(document).ready() 会按顺序执行，不会覆盖。