在现代网页开发中，用户体验和页面加载速度是两大核心要素。为了确保在页面资源加载完成后能够执行特定的操作，开发者通常需要借助“页面加载事件”来进行控制。jQuery，作为一种功能强大且简洁易用的JavaScript库，提供了三种主要的页面加载事件。它们分别是：$(document).ready(),$(window).load()和$(window).on('load')。这些事件的使用场景和效果有所不同，理解它们的特性和应用场景，对于提升页面的性能和确保页面内容的正常展示至关重要。
1.$(document).ready()：DOM加载完成事件
在jQuery中，$(document).ready()是最常用的页面加载事件之一。它的主要作用是确保页面的DOM结构加载完毕，意味着HTML文档已经被解析，但此时的CSS、图片等其他资源可能还未完全加载。换句话说，$(document).ready()的触发时机是页面内容已经可以操作，但页面资源可能还在加载中。
通常情况下，我们会在$(document).ready()事件内放置一些初始化的代码，比如绑定事件、动态修改DOM内容等。由于该事件在DOM解析完成后就会触发，因此它可以帮助开发者提前操作页面元素，提高用户的交互体验。
例如：
$(document).ready(function(){
alert("DOM已经加载完成！");
});
通过这个简单的代码，当页面的DOM结构完成解析时，就会弹出提示框“DOM已经加载完成”。可以看到，$(document).ready()确保了你能够在页面内容加载完毕后执行特定的操作，而不必等到所有的资源加载完成。
2.$(window).load()：所有资源加载完成事件
在jQuery的早期版本中，$(window).load()是用来检测页面是否加载完成的常用方法。与$(document).ready()不同，$(window).load()不仅等待DOM结构的加载完成，还等待页面中所有资源（如图片、视频、样式表等）加载完毕后才会触发。这个事件特别适合用于需要等到页面资源完全加载后再执行的操作，比如处理页面中的图片尺寸、计算动态内容的布局等。
在实际开发中，使用$(window).load()可以确保在页面的所有资源都准备好之后再执行一些重计算或其他需要资源的操作。不过需要注意的是，$(window).load()事件在现代浏览器中已经被废弃，建议使用$(window).on('load')来代替。
例如：
$(window).load(function(){
alert("页面所有资源加载完成！");
});
这个事件会等到页面中的图片、脚本等资源都加载完毕，才会执行相关的操作。
3.$(window).on('load')：现代浏览器推荐的事件
随着jQuery的更新，$(window).load()逐渐被弃用，取而代之的是$(window).on('load')事件。$(window).on('load')与$(window).load()在功能上没有太大的区别，依然是等待页面所有资源（包括图片、样式表等）加载完成后执行的事件。使用.on()方法来绑定事件，是为了提供更灵活的事件管理机制，特别是当需要绑定多个事件处理函数时，.on()方法的使用会更加方便。
例如：
$(window).on('load',function(){
alert("所有资源加载完成！");
});
这种写法不仅能够确保页面所有资源加载完毕后再执行相应操作，同时也能够保持代码的规范性和可维护性。现代的开发中，推荐使用这种方式来替代旧版的$(window).load()。
4.为什么选择合适的页面加载事件？
选择合适的加载事件不仅关系到页面的渲染效率，还能直接影响用户体验。在开发过程中，根据实际需求选择不同的页面加载事件至关重要。下面，我们来具体探讨一下何时使用$(document).ready()，何时使用$(window).on('load')。
4.1使用$(document).ready()的场景
DOM结构已加载，但不关心外部资源：如果你只需要操作DOM元素，而不关心图片或CSS的加载状态，$(document).ready()是最合适的选择。例如，动态加载内容、绑定事件等操作，都可以在DOM解析完成后立即进行。
提高页面响应速度：由于$(document).ready()事件在DOM解析完成后就会触发，它能够帮助你尽早启动交互逻辑，从而提升页面的响应速度和用户体验。
4.2使用$(window).on('load')的场景
需要等所有资源加载完成：当你需要确保页面中所有资源（如图片、字体等）都加载完毕之后再进行某些操作时，$(window).on('load')是最佳选择。例如，在进行图片轮播、计算图像的宽高等操作时，必须等到所有的资源加载完毕。
处理布局调整和计算：一些页面布局依赖于图片的实际尺寸，因此只能等到图片完全加载之后才能做出正确的布局调整。此时，使用$(window).on('load')会更加稳妥。
5.页面加载事件的性能优化
在实际开发中，合理使用加载事件不仅能提升用户体验，还能对页面性能产生积极的影响。以下是一些性能优化的小技巧：
延迟不必要的操作：尽量避免在$(document).ready()或$(window).on('load')中执行繁重的计算或异步请求，尽量将这些操作分摊到多个事件中，以避免页面加载时阻塞用户的操作。
资源优化：优化图片、CSS和JS文件的加载顺序，确保页面资源能够按需加载，减少不必要的资源阻塞。通过懒加载（LazyLoading）等技术，可以优化页面加载性能。
非阻塞操作：对于非关键操作，可以考虑使用setTimeout()或requestAnimationFrame()等方式将任务分发到下一帧，避免页面渲染阻塞，提升加载效率。
6.总结
通过本文的介绍，相信你对jQuery中的三种加载页面事件有了更加清晰的了解。在实际开发中，根据具体的需求和场景来选择合适的加载事件，能够极大提升页面的加载效率和用户体验。无论是$(document).ready()、$(window).load()，还是$(window).on('load')，它们各自都有自己的应用场景，灵活掌握并合理运用，将帮助你更高效地构建高性能的网页应用。
理解这些加载事件的本质，掌握它们的优缺点，你将能在开发中游刃有余，应对各种复杂的页面加载需求。
