JavaScript实例解析之window页面加载事件

1. window.onload事件介绍

在浏览器中，当页面加载完成时，会触发一个名为window.onload的事件。这个事件是在所有的资源都加载完成后才会触发。

使用window.onload的好处：能够确保你的代码只有在页面和所有资源都加载完成后才会运行，从而避免因为代码运行过早而导致的异常情况。

window.onload = function() {
  // Your code here
}

2. document.ready事件介绍

document.ready是jQuery框架中的一个方法，用于在文档对象模型 (DOM) 准备完毕后，就立即执行指定的函数。

使用document.ready的好处：可以加快页面的加载速度，因为它不需要等待所有资源都被加载完成。此外，如果你需要在页面加载时执行的代码并不需要依赖于某些资源（如图片），那么你完全可以使用document.ready来代替window.onload。

$(document).ready(function() {
  // Your code here
});

2.1 window.onload和document.ready的区别

两者之间的最大差异就在于，document.ready方法会在DOM构建完成后执行，而window.onload则会等到所有资源都加载完毕后才会执行。

为什么一些人更倾向于使用document.ready方法呢？因为它对于代码的执行时间提供了一个更好的控制，使代码更加快速地执行。相比之下，window.onload的执行速度可能会受到一些客观因素（如图片下载速度）的制约，因此可能会相对较慢。

3. window.onload事件的应用场景

3.1 加载图片

window.onload最常见的应用场景之一就是加载图片。因为图片比较大，所以在加载过程中可能会导致页面卡顿，甚至会出现一些不友好的情况（如图片加载失败等）。但如果你使用window.onload，那么图片加载完毕后，页面才会显示，这可以帮助你避免此类问题。

window.onload = function() {
  var img = new Image();
  img.onload = function() {
    document.getElementById('image-container').appendChild(img);
  };
  img.src = 'path/to/image.jpg';
};

3.2 加载广告

和图片一样，广告也可能对页面速度造成影响，因此可以通过window.onload实现广告的延迟加载，从而提高网页的加载速度。

window.onload = function() {
  var ad = document.createElement('script');
  ad.type = 'text/javascript';
  ad.src = 'path/to/ad-script.js';
  document.getElementsByTagName('head')[0].appendChild(ad);
};

4. 总结

在绝大多数情况下，我们都可以使用document.ready来代替window.onload，从而提高代码的执行效率。但有些场景下，例如在需要加载大量资源时，我们仍然需要使用window.onload，保证页面在资源完全加载后才显示。

无论你使用哪种方法，在编写JavaScript代码时，一定要注意性能问题，不要让你的代码拖累整个网站！