jquery加载完成后执行

jQuery 加载完成后执行的方法

在 jQuery 中，确保代码在文档加载完成后执行是一个常见的需求。以下是几种常用的方法：

使用 $(document).ready()

$(document).ready(function() {
    // 在这里编写需要在文档加载完成后执行的代码
    console.log("文档已加载完成");
});

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

$(function() {
    // 这是 $(document).ready() 的简写形式
    console.log("文档已加载完成");
});

使用 window.onload 与 jQuery 结合

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

$(window).on('load', function() {
    // 在所有资源加载完成后执行
    console.log("所有资源已加载完成");
});

动态加载 jQuery 后执行代码

如果 jQuery 本身是动态加载的，可以使用以下方法确保代码在 jQuery 加载完成后执行：

function loadScript(url, callback) {
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = url;
    script.onload = callback;
    document.head.appendChild(script);
}

loadScript('https://code.jquery.com/jquery-3.6.0.min.js', function() {
    $(function() {
        console.log("jQuery 加载完成且文档已就绪");
    });
});

使用 defer 或 async 属性

在引入 jQuery 时，可以使用 defer 或 async 属性来控制脚本加载顺序：

<script src="https://code.jquery.com/jquery-3.6.0.min.js" defer></script>
<script>
    $(function() {
        console.log("文档已加载完成");
    });
</script>

注意事项

• $(document).ready() 会在 DOM 树构建完成后立即执行，无需等待图片等资源加载。
• window.onload 会等待所有资源加载完成，包括图片和样式表。
• 动态加载 jQuery 时，确保回调函数中使用的代码在 jQuery 完全加载后执行。