深入分析jQuery的ready函数是如何工作的(工作原理)

本文深入分析jQuery的ready函数是如何工作的。分享给大家供大家参考，具体如下：

jQuery 是一个伟大的脚本库，由 John Resig 在 2006年1月的BarCamp NYC上释出第一个版本。你可以在 http://jquery.com/ 下载到最新版本，截止本文发布为止已更新到jQuery 2.1.4版。这里以jQuery1.8.3为例分析。

学习 jQuery 有许多途径，我们今天从 jQuery 的 ready 函数开始。本例中的代码都来自于 jQuery 脚本库。

如果你使用过 jQuery , 就必然使用过 ready 函数，它用来注册当页面准备好之后可以执行的函数。

问题来啦，我们的页面什么时候准备好了呢？

1. onload 事件

最基本的处理方式就是页面的 onload 事件，我们在处理这个事件的时候，可以有多种方式，即可以通过 HTML 方式，直接写在 body 元素的开始标记中，也可以使用事件注册的方式来使用，这又可以分为 DOM0 方式和 DOM2 方式。再考虑到浏览器的兼容性，使用 DOM2 方式写出来，如下所示。

if (document.addEventListener) {
  // A fallback to window.onload, that will always work
  window.addEventListener("load", jQuery.ready, false);
  // If IE event model is used
} else {
  // A fallback to window.onload, that will always work
  window.attachEvent("onload", jQuery.ready);
}

2. DOMContentLoaded 事件

不过 onload 事件要等到所有页面元素加载完成才会触发, 包括页面上的图片等等。如果网页上有大量的图片，效果可想而知，用户可能在没有看到图片的时候，就已经开始操作页面了，而这时我们的页面还没有初始化，事件还没有注册上，这岂不是太晚了！

除了大家熟知的 onload 事件之外， 与 DOM 中的 onload 事件相近的，我们还有 DOMContentLoaded 事件可以考虑， 基于标准的浏览器支持这个事件,  当所有 DOM 解析完以后会触发这个事件。

这样，对于基于标准的浏览器来说，我们还可以注册这个事件的处理。这样，我们可能更早地捕获到加载完成的事件。

if (document.addEventListener) {
  // Use the handy event callback
  document.addEventListener("DOMContentLoaded", DOMContentLoaded, false);
  // A fallback to window.onload, that will always work
  window.addEventListener("load", jQuery.ready, false);
}

3. onreadystatechange 事件

不标准的浏览器怎么办呢？

如果浏览器存在 document.onreadystatechange 事件，当该事件触发时，如果 document.readyState=complete 的时候，可视为 DOM 树已经载入。

不过，这个事件不太可靠，比如当页面中存在图片的时候，可能反而在 onload 事件之后才能触发，换言之，它只能正确地执行于页面不包含二进制资源或非常少或者被缓存时作为一个备选吧。