load 事件

分类: Events > Document Loading
为 "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 设置为与之前相同的值，它在 WebKit 中不会正确触发
  • 它不会正确地冒泡传播到 DOM 树
  • 对于已经存在于浏览器缓存中的图像，它可能会停止触发

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

示例

示例 1

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

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

示例 2

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

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