.load()

分类: Events > Document Loading

.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');
  }
});