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>
需要注意的是,以上方式可以同时使用,但是建议使用其中一种方式来统一管理页面加载时执行的代码,以提高代码的可读性和维护性。