jquery

jquery页面加载执行的方式有哪些

小亿
124
2023-08-05 01:24:21
栏目: 编程语言

jQuery 提供了多种方式来控制页面加载时执行的代码。

  1. $(document).ready(function(){}):页面 DOM 结构加载完成后执行,相当于 DOMContentLoaded 事件。在这个事件中执行的代码可以访问和操作 DOM 元素。
$(document).ready(function(){
// 执行代码
});
  1. $(window).on('load', function(){}):页面所有资源(包括图片和脚本)加载完成后执行,相当于 load 事件。在这个事件中执行的代码可以访问和操作 DOM 元素以及其他资源。
$(window).on('load', function(){
// 执行代码
});
  1. $(function(){}):简化版的 $(document).ready(function(){}),用于简单的代码片段。在这个事件中执行的代码可以访问和操作 DOM 元素。
$(function(){
// 执行代码
});
  1. defer 属性:可以将 <script> 标签添加 defer 属性,使脚本在页面文档解析完毕后再执行。这样可以保证脚本在 DOM 元素可用时执行。注意,defer 属性只适用于外部脚本文件。
<script src="script.js" defer></script>
  1. async 属性:可以将 <script> 标签添加 async 属性,使脚本异步加载并立即执行,不会阻塞页面的解析和其他资源的加载。这样可以加快页面的加载速度,但是执行顺序可能会受到影响。注意,async 属性只适用于外部脚本文件。
<script src="script.js" async></script>

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

0
看了该问题的人还看了