加载事件

类别: 事件 > 文档加载
将事件处理程序绑定到“load”事件，或在元素上触发该事件。

内容

.on( "load" [, eventData ], handler )返回值: jQuery

描述: 将事件处理程序绑定到“load”事件。

此页面描述了 load 事件。对于 jQuery 3.0 中删除的 .load() 方法，请参阅 .load()。

当元素及其所有子元素完全加载时，会向该元素发送 load 事件。此事件可以发送到与 URL 关联的任何元素：图像、脚本、框架、iframe 和 window 对象。

例如，考虑一个包含简单图像的页面

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

事件处理程序可以绑定到图像

1
2
3
 
$( "#book" ).on( "load", function() {
  // Handler for `load` called.
} );

图像加载后，立即调用处理程序。

通常，无需等待所有图像完全加载。如果代码可以提前执行，通常最好将其放置在发送到.ready()方法的处理程序中。

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

开发人员尝试使用load快捷方式解决的一个常见问题是在图像（或图像集合）完全加载后执行函数。这方面有一些已知的注意事项，应注意。这些是

  • 它在跨浏览器之间不一致也不可靠
  • 如果图像src设置为与之前相同的src，它不会在WebKit中正确触发
  • 它不会正确地向上冒泡到DOM树
  • 对于已经存在于浏览器缓存中的图像，可能会停止触发

注意：.live()和.delegate()方法不能用于检测iframe的load事件。load事件不会正确地向上冒泡到父文档，并且event.target没有由Firefox、IE9或Chrome设置，这是进行事件委托所必需的。

示例

页面完全加载（包括图形）时运行函数。

1
2
3
 
$( window ).on( "load", function() {
  // Run code
} );

在每个图像加载时，将bigImg类添加到所有高度大于100的图像。

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