load和ready区别
在jQuery中,`load`和`ready`是两个不同的事件。
1. `load`事件:
- `load`事件在元素(如图片、iframe)或整个页面加载完成后触发。
- 当元素的所有资源(包括图片、样式表等)都加载完成后,`load`事件被触发。
- 对于`img`元素,当图片加载完成后,`load`事件会被触发。
- 对于`iframe`元素,当嵌入的文档加载完成后,`load`事件会被触发。
- 对于整个页面,当所有的资源(包括图片、样式表、脚本等)都加载完成后,`load`事件会被触发。
- 示例:
$(window).on('load', function() {
// 页面或元素的所有资源加载完成后执行的代码
});
2. `ready`事件:
- `ready`事件在DOM树构建完成后触发,即HTML文档结构已经解析完毕,但外部资源(如图片)可能尚未加载完毕。
- 当DOM结构准备就绪时,`ready`事件被触发,表示可以对DOM进行操作了。
- `ready`事件是jQuery特有的事件,它是通过监听`DOMContentLoaded`事件实现的,但在某些浏览器中,`DOMContentLoaded`事件可能存在兼容性问题。因此,jQuery提供了`ready`事件来确保在所有浏览器中一致地使用。
- 示例:
$(document).ready(function() {
// DOM准备就绪后执行的代码
});
或简写为:
$(function() {
// DOM准备就绪后执行的代码
});
总结:
- `load`事件表示页面或元素的所有资源(包括图片、样式表等)已经加载完成。
- `ready`事件表示DOM结构已经解析完毕,可以对DOM进行操作,但外部资源(如图片)可能尚未加载完毕。