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>
需要注意的是，以上方式可以同時使用，但是建議使用其中一種方式來統一管理頁面加載時執行的代碼，以提高代碼的可讀性和維護性。
