jquery自动加载

jQuery 自动加载的实现方法

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

使用 $(document).ready() 或 $(function() {})

这两种方式是 jQuery 提供的标准方法，确保代码在 DOM 完全加载后执行。

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

// 简写形式
$(function() {
    // 自动执行的代码
    console.log("DOM 已加载完成（简写形式）");
});

使用 window.onload

如果需要等待所有资源（如图片）加载完成，可以使用 window.onload。

window.onload = function() {
    // 所有资源加载完成后执行
    console.log("页面所有资源已加载完成");
};

动态加载内容

通过 AJAX 或其他方式动态加载内容，可以在页面加载时自动触发。

$(function() {
    $.ajax({
        url: "data.html",
        method: "GET",
        success: function(response) {
            $("#content").html(response);
        }
    });
});

使用 $(window).on('load', function() {})

与 window.onload 类似，但使用 jQuery 的事件绑定方式。

$(window).on('load', function() {
    // 所有资源加载完成后执行
    console.log("页面所有资源已加载完成（jQuery 方式）");
});

注意事项

• $(document).ready() 和 $(function() {}) 只等待 DOM 加载完成，不等待图片等资源。
• window.onload 和 $(window).on('load') 会等待所有资源加载完成，但可能延迟执行时间。
• 动态加载内容时，需确保目标元素已存在于 DOM 中。