3.1 在页面加载后执行任务
3.1 在页面加载后执行任务
我们已经看到如何让jQuery响应网页的加载事件,$(document).ready()事件处理程序可以用来触发函数中的代码,但对这个过程还有待深入分析。
3.1.1 代码执行的时机选择
在第1章中,我们知道了$(document).ready()是jQuery基于页面加载执行任务的一种主要方式。但这并不是唯一的方式,原生的window.onload事件也可以实现相同的效果。虽然这两个方法具有类似的效果,但是,它们在触发操作的时间上存在着微妙的差异,这种差异只有在加载的资源多到一定程度时才会体现出来。
window.onload时间和$(document).ready()的区别
当文档完全下载到浏览器中时,会触发window.onload事件。这意味着页面上的全部元素对JavaScript而言都是可以操作的,这种情况对编写功能性的代码非常有利,因为无需考虑加载的次序。
另一方面,通过$(document).ready()注册的事件处理程序,则会在DOM完全就绪并可以使用时调用。虽然这也意味着所有元素对脚本而言都是可以访问的,但是,却不意味着所有关联的文件都已经下载完毕。换句话说,当HTML下载完成并解析为DOM树之后,代码就可以运行。
加载样式与执行代码
为了保证JavaScript代码执行以前页面已经应用了样式,最好是在<head>元素中把<link rel="stylesheet">标签和<style>标签放在<script>标签前面。
举一个例子,假设有一个表现图库的页面,这种页面中可能会包含许多大型图像,我们可以通过jQuery隐藏、显示、移动或以其他方式操纵这些图像。如果我们通过onload事件设置界面,那么用户在能够使用这个页面之前,必须要等到每一幅图像都下载完成。更糟糕的是,如果行为尚未添加给那些具有默认行为的元素(例如链接) , 那么用户的交互可能会导致意想不到的结果。然而,当我们使用$(document).ready()进行设置时,这个界面就会更早地准备好可用的正确行为。
什么是加载完成
一般来说, 使用$(document).ready()要优于使用onload事件处理程序,但必须要明确的一点是,因为支持文件可能还没有加载完成,所以类似图像的高度和宽度这样的属性此时则不一定会有效。如果需要访问这些属性,可能就得选择实现一个onload事件处理程序(或者是使用jQuery为load事件设置处理程序)。这两种机制能够和平共存。