jQuery 提供了多种方式来控制页面加载时执行的代码。
$(document).ready(function(){})：页面 DOM 结构加载完成后执行，相当于 DOMContentLoaded 事件。在这个事件中执行的代码可以访问和操作 DOM 元素。$(document).ready(function(){
// 执行代码
});
$(window).on('load', function(){})：页面所有资源（包括图片和脚本）加载完成后执行，相当于 load 事件。在这个事件中执行的代码可以访问和操作 DOM 元素以及其他资源。$(window).on('load', function(){
// 执行代码
});
$(function(){})：简化版的 $(document).ready(function(){})，用于简单的代码片段。在这个事件中执行的代码可以访问和操作 DOM 元素。$(function(){
// 执行代码
});
defer 属性：可以将 <script> 标签添加 defer 属性，使脚本在页面文档解析完毕后再执行。这样可以保证脚本在 DOM 元素可用时执行。注意，defer 属性只适用于外部脚本文件。<script src="script.js" defer></script>
async 属性：可以将 <script> 标签添加 async 属性，使脚本异步加载并立即执行，不会阻塞页面的解析和其他资源的加载。这样可以加快页面的加载速度，但是执行顺序可能会受到影响。注意，async 属性只适用于外部脚本文件。<script src="script.js" async></script>
需要注意的是，以上方式可以同时使用，但是建议使用其中一种方式来统一管理页面加载时执行的代码，以提高代码的可读性和维护性。
