jQuery页面加载后执行的事件(3种方式)

在前端开发中，我们时常需要在页面加载完成后执行一些操作。为此，jQuery提供了几种方式来帮助我们实现这个需求。

1. ready()方法

jQuery的 ready()方法是最常用的一种方式。这个方法会在DOM树加载完成后立即执行，而无需等待其他资源（如图片等）加载完成。可以把一些初始化的代码放在这个回调函数中，以免被其他代码干扰。

$(document).ready(function() {
  console.log("Hello, jQuery!");
});

也可以使用以下简化形式，把回调函数作为参数传递给ready()方法：

$(function() {
  console.log("Hello, jQuery!");
});

这种方式可以让代码更加简洁易读。

2. load()方法

load()方法是在页面中的所有资源（包括图片）加载完成后才会执行。这种方式不仅仅在DOM树完成后执行，还会等待其他资源加载完成后执行，因此可能需要消耗更多的时间。

$(window).load(function() {
  console.log("All resources have been loaded!");
});

3. ready()方法和load()方法的组合

如果需要等待所有资源（包括图片）都加载完成后执行某些代码，可以把ready()方法和load()方法组合起来使用。

$(document).ready(function() {
  $(window).load(function() {
     console.log("All resources have been loaded!");
  });
});

注意，组合使用这两个方法时，必须保证load()方法在ready()方法之内定义，否则可能出现无法正常执行的情况。

总结

这篇文章介绍了jQuery页面加载后执行的3种方式，分别是：

1. 使用ready()方法；
2. 使用load()方法；
3. 组合使用ready()方法和load()方法。

每种方式都有其适用场景，开发者可以根据实际需求选择合适的方式。