jquery自动加载

jQuery 自动加载的实现方法

jQuery 自动加载通常指的是在页面加载时自动执行某些 jQuery 代码或动态加载内容。以下是几种常见的实现方式：

使用 $(document).ready()

$(document).ready(function() {
    // 页面DOM加载完成后自动执行的代码
    console.log("DOM fully loaded");
});

使用 $(function() {}) 简写形式

$(function() {
    // 等同于 $(document).ready()
    // 自动加载的代码写在这里
});

使用 window.onload

window.onload = function() {
    // 等待页面所有资源(包括图片)加载完成后执行
    $("body").css("background-color", "#f5f5f5");
};

动态加载内容

$(function() {
    // 自动通过AJAX加载内容
    $("#content").load("data.html");
});

延迟加载

$(window).on("load", function() {
    // 延迟加载图片等资源
    $("img.lazy").lazyload();
});

自动加载插件

$(function() {
    // 初始化自动加载的插件
    $(".slider").bxSlider({
        auto: true,
        pause: 4000
    });
});

注意事项

• 确保在调用jQuery代码前已加载jQuery库
• 使用$(document).ready()比window.onload更快触发，因为它不等待图片等资源加载
• 对于需要操作DOM元素的代码，必须等待DOM加载完成
• 对于性能敏感的场景，可以考虑使用事件委托或延迟加载技术