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