.load()| jqueryAPI 2.2 中文手册- AspRain.cn 致力于Web开发技术翻译整理

jQuery API 2.2.0

.load()

分类:建议弃用 > 建议弃用于1.8 | 事件 > 文档载入

返回: jQuery
弃用于:1.8

.load( handler )

描述:把某个事件处理函数绑定到JavaScript事件“load”上。

加入于: 1.0
.load( handler )
  • handler
    类型:FunctionEvent eventObject )
    一个函数,在触发事件时执行它。
加入于: 1.4.3
.load( [eventData ], handler )
  • eventData
    类型:Anything
    一个对象,它包含了要传递给事件处理函数的数据。
  • handler
    类型:FunctionEvent eventObject )
    一个函数,在每次事件被触发时执行它。

该方法是.on( "load", handler )的简写。

网页上当一个元素和它的所有的子元素完全载入时,load事件就发送到这个元素上了。这个事件可以发送到任何与一个url有关联的元素上:<image>、<script>、<frames>,以及windows对象。

举个例子,设想一个带有一张图片的网页:

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

该事件处理函数被绑定到图像上:

$( "#book" ).load(function() {
  // Handler for .load() called.
});

一旦图像已经载入,就会调用处理函数。

一般情况下,不需要等待所有的图像完全载入。如果代码可以更早执行,通常最好把它放到一个发送到.ready()方法的处理函数中。

Ajax模块也有一个方法,名为.load()。jQuery会根据传递给它的参数的设置来确定要引发哪种方法。

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

使用.load()简写,开发员们试图解决的一个常见挑战是,当一个图像(或者一个图像集合)完会载入时,执行一个函数。关于它,有一些已知的注意事项。即:

  • 它不能一致性地起作用,或者可靠地跨浏览器起作用。
  • 在WebKit中,如果图像的src被设置为和之前相同的src,则不会正确地引发该事件处理函数。
  • 它不能正确地沿着DOM树向上冒泡。
  • 如果图像已经驻留在浏览器的缓存中,可能不会引发处理函数。

注意: 注意,.love()方法和.delegate()方法不能用来侦测一个<iframe>的load事件。load事件上能正确地向上冒泡到父document,而且Firefox浏览器、IE9或Chrome浏览器不能设置event.target,而event.target是做事件委托必不可少的。

示例

当网页,包括图像在内,完全载入的时候,运行一个函数。

$( window ).load(function() {
  // Run code
});

当每个图像载入时,把样式类bigImg添加到所有的高度大于100像素图像上。

$( "img.userIcon" ).load(function() {
  if ( $( this ).height() > 100) {
    $( this ).addClass( "bigImg" );
  }
});

如果网页上不能运行示例,请点击http://www.asprain.cn/jQueryAPI/load-event.htm查看示例。

如果你觉得本文档对你有用,欢迎给翻译作者支付宝打赏,支持翻译作者源源不断翻译更多有用的技术文档。