内容目录
load()函数用于为每个匹配元素的load事件绑定处理函数。此外，你还可以额外传递给事件处理函数一些数据。
load事件会在资源加载完成时触发。该事件主要用于window对象、document对象、<body>、<script>、<link>、<img>、<iframe>、<frameset>、<frame>等元素。
此外，你可以为同一元素多次调用该函数，从而绑定多个事件处理函数。触发load事件时，jQuery会按照绑定的先后顺序依次执行绑定的事件处理函数。
注意：如果你在img元素上使用load()函数，可能存在以下问题：
- 无法保证一贯的跨浏览器可靠性。
- 在WebKit内核的浏览器中，如果将src属性设置为与之前相同的src属性值，将无法正确触发事件。
- 无法正确在DOM树中冒泡。
- 对于浏览器已经缓存的图像，可能会终止触发事件。
要删除通过load()绑定的事件，请使用unbind()函数。
这里介绍的load()是一个事件函数，jQuery中还有一个同名的Ajax函数load()，用于通过Ajax加载html文档内容。
该函数属于jQuery对象(实例)。
语法
jQuery 1.0 新增该函数，但从1.8开始被标记为已过时。
jQueryObject.load( [ data ,] handler )参数
| 参数 | 描述 |
|---|---|
| data | 可选/任意类型触发事件时，需要通过event.data传递给事件处理函数的任意数据。 |
| handler | Function类型指定的事件处理函数。 |
jQuery 1.4.3 新增支持：load()支持data参数。
参数handler中的this指向当前DOM元素。load()还会为handler传入一个参数：表示当前事件的Event对象。
返回值
load()函数的返回值为jQuery类型，返回当前jQuery对象本身。
示例&说明
请参考以下HTML示例代码：
<img src="https://codeplayer.vip/static/image/backTop.png" alt="回到顶部" />现在，我们为window对象的load事件绑定处理函数(可以绑定多个，触发时按照绑定顺序依次执行)：
$(window).load( function(){
alert("文档加载完毕!");
} );
$("img").load( function(){
alert( "图片[" + this.alt + "]加载完毕!" );
} );运行代码(以下代码请自行复制到演示页面运行)
我们还可以为事件处理函数传递一些附加的数据。此外，通过jQuery为事件处理函数传入的参数Event对象，我们可以获取当前事件的相关信息(比如事件类型、触发事件的DOM元素、附加数据等)：
var maxSize = { width: 20, height: 55 };
$("img").load( maxSize, function(event){
if( this.width > event.data.width )
this.width = event.data.width;
if( this.height > event.data.height )
this.height = event.data.height;
} );
0 条评论
撰写评论