.load()


html+div+css+天猫商城
html5+css3+京东手机网站
javascript+jquery+ajax
正则表达式+面向对象+js插件
2D+3D+触屏事件+Canvas+Svg
地理信息+本地存储+H5拖拽api
查看课程大纲

.load( handler(eventObject) )返回: jQuery过时版本: 1.8, 删除版本: 3.0

描述: 为 JavaScript 的 "load" 事件绑定一个处理函数。

  • 添加的版本: 1.0.load( handler(eventObject) )

    • handler(eventObject)
      类型: Function()
      每次事件触发时会执行的函数。
  • 添加的版本: 1.4.3.load( [eventData ], handler(eventObject) )

    • eventData
      类型: PlainObject
      一个对象,它包含的数据键值对映射将被传递给事件处理程序。
    • handler(eventObject)
      类型: Function()
      每次事件触发时会执行的函数。

这个方法是 .bind('load', handler) 的快捷方式。

当所有子元素已经被完全加载完成时,load事件被发送到这个元素。此事件适用于任何可使用 URL关联的任何元素:images, scripts, frames, iframes, window 对象。

例子,考虑了一个简单的图片页面:

1
<img src="book.png" alt="Book" id="book" />

事件处理器可以绑定到图像上:

1
2
3
$('#book').load(function() {
// Handler for .load() called.
});

只要图像已被加载,该处理程序被调用。

在一般情况下,没有必要等待所有图像完全装入。如果代码可以更早的执行,通常最好把它在发送到.ready()方法处理。

Ajax的模块也有一个方法命名.load() 。jQuery根据传递给它的参数设置来确定使用哪个方法执行。

当使用图像上的load事件时的注意事项

开发者们在试图使用 .load() 事件来解决一个共通的挑战,那就是:当一张图片(或一组图片)被完全加载完之后,执行一个函数。以下是一些相关的注意事项:

  • 它在跨浏览器下始终是不可靠
  • 如果被设置图片的src和之前的src相同,在WebKit中,该事件不能正常触发
  • 不能正常的在DOM树上冒泡
  • 如果图片已经在浏览器的缓存中,将停止触发

注意:.live().delegate()方法不能用于检测一个iframe的load事件。load事件不能正常泡沫到父文档,并且在Firefox,IE9和Chrome浏览器中,event.target无法被设置,因为它需要事件代理。

例子:

Example: 当页面(包括所有图片)被完全加载完后,执行一个函数。

1
2
3
$(window).load(function () {
// run code
});

Example: 在图片对象的 load 事件中,做如下处理:如果图片高度大于 100,就给它添加 bigImg 样式。

1
2
3
4
5
$('img.userIcon').load(function(){
if($(this).height() > 100) {
$(this).addClass('bigImg');
}
});