jquery页面加载事件

jQuery 页面加载事件

在 jQuery 中，页面加载事件的常用方法是 $(document).ready() 或简写的 $()。这些方法确保 DOM 完全加载后执行代码，而无需等待图片或其他资源加载完成。

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

// 简写形式
$(function() {
    // DOM 完全加载后执行的代码
});

与其他事件的对比

$(document).ready() 与 window.onload 不同。window.onload 会等待页面所有资源（如图片、样式表）加载完成，而 $(document).ready() 仅需 DOM 就绪即可触发。

window.onload = function() {
    // 页面所有资源加载完成后执行的代码
};

多个加载事件的处理

如果需要绑定多个页面加载事件，可以多次调用 $(document).ready()，所有回调函数会按顺序执行。

$(document).ready(function() {
    console.log("第一个加载事件");
});

$(document).ready(function() {
    console.log("第二个加载事件");
});

动态加载内容

如果页面加载后动态插入内容，可以通过事件委托或手动触发事件来处理动态加载的元素。

$(document).ready(function() {
    $(document).on("click", ".dynamic-element", function() {
        console.log("动态加载的元素被点击");
    });
});

异步加载脚本

在页面加载后动态加载脚本时，可以使用 $.getScript() 方法。

$(document).ready(function() {
    $.getScript("path/to/script.js", function() {
        console.log("脚本加载完成");
    });
});

注意事项

• 避免在 $(document).ready() 中执行耗时操作，以免阻塞页面渲染。
• 确保 jQuery 库在调用 $(document).ready() 之前加载。
• 现代 JavaScript 框架（如 React、Vue）可能不需要使用 jQuery 的加载事件。