jQuery 页面完全加载完成事件
在网页开发中，我们经常需要在页面完全加载完成后执行一些操作，比如初始化一些插件、发送请求或者显示动画等。对于这种需求，我们可以使用 jQuery 提供的 $(document).ready() 方法来实现。
$(document).ready() 方法
$(document).ready() 方法是 jQuery 中一个非常常用的方法，它用来在文档加载完成后执行指定的函数。这个方法可以确保在页面的 DOM（文档对象模型）完全加载后再执行代码，这样可以避免在 DOM 还未完全构建完成时就执行操作。
下面是一个简单的示例，演示了如何使用 $(document).ready() 方法：
$(document).ready(function(){
// 在页面加载完成后执行的代码
alert("页面加载完成！");
});
在这个示例中，当页面加载完成后会弹出一个提示框显示"页面加载完成！"。
完整加载事件
除了 $(document).ready() 方法外，还有一个事件可以监听页面的完整加载，即 $(window).on('load', function(){})。这个事件在页面的所有资源（包括图片、样式表等）都加载完成后触发。
下面是一个示例，演示了如何使用 load 事件：
$(window).on('load', function(){
// 当页面所有资源加载完成后执行的代码
console.log("页面所有资源加载完成！");
});
示例
为了更好地理解 $(document).ready() 和 load 事件的区别，我们来看一个完整的示例。
journey
title 页面加载过程示例
section 页面加载
来自 浏览器 as 浏览器
来自 服务器 as 服务器
浏览器 ==> 服务器 : 请求HTML
服务器 --> 浏览器 : 返回HTML
浏览器 ==> 服务器 : 请求CSS
服务器 --> 浏览器 : 返回CSS
浏览器 ==> 服务器 : 请求JS
服务器 --> 浏览器 : 返回JS
浏览器 ==> 服务器 : 请求图片
服务器 --> 浏览器 : 返回图片
section $(document).ready()
浏览器 --> HTML : 构建DOM
HTML --> CSS : 加载CSS
CSS --> JavaScript : 加载JS
JavaScript --> 页面 : 执行 $(document).ready() 中的代码
section load
浏览器 --> 页面 : 加载完所有资源
stateDiagram
[*] --> 页面加载中: 请求HTML
页面加载中 --> HTML构建完成: 返回HTML
HTML构建完成 --> CSS加载中: 加载CSS
CSS加载中 --> JS加载中: 加载JS
JS加载中 --> 执行 $(document).ready(): JS加载完
执行 $(document).ready() --> [*] : 页面完全加载完成
页面完全加载完成 --> 所有资源加载完: 执行 $(window).on('load')
所有资源加载完 --> [*]: 页面所有资源加载完成
在这个示例中，浏览器首先请求页面的 HTML、CSS、JS 文件以及图片等资源，然后在构建完整的 DOM 结构后执行 $(document).ready() 中的代码，最后在所有资源加载完成后触发 load 事件。
通过上面的示例，我们可以清楚地看到页面加载的整个过程以及 $(document).ready() 和 load 事件的执行时机。
总的来说，$(document).ready() 方法用来在 DOM 加载完成后执行代码，而 load 事件则是在页面所有资源加载完成后才触发。在实际开发中，根据具体需求选择合适的事件来执行相应的操作，可以使页面加载更加流畅和用户体验更好。
