当前位置: 首页>>代码示例 >>用法及示例精选 >>正文

JQuery .load()用法及代码示例


用法 
.load( handler ) => jQuery

版本已弃用：1.8，已删除：3.0

说明：将事件处理程序绑定到 "load" JavaScript 事件。

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

    • handler
      类型：Function(Event eventObject)
      触发事件时执行的函数。

  • 添加的版本：1.4.3.load( [eventData ], handler )

    • eventData
      类型：Anything
      包含将传递给事件处理程序的数据的对象。
    • handler
      类型：Function(Event eventObject)
      每次触发事件时执行的函数。

注意：这个 API 在 jQuery 3.0 中已经被移除；请使用 .on( "load", handler ) 而不是 .load( handler ) 和 .trigger( "load" ) 而不是 .load() 。

此方法是 .on( "load", handler ) 的快捷方式。

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

例如，考虑一个带有简单图像的页面：

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

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

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

一旦图像被加载，处理程序就会被调用。

一般来说，没有必要等待所有图像完全加载。如果可以更早地执行代码，通常最好将其放在发送到 .ready() 方法的处理程序中。

Ajax 模块还有一个名为 .load() 的方法。哪个被触发取决于传递的参数集。

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

开发人员尝试使用.load() 快捷方式解决的一个常见挑战是在完全加载图像(或图像集合)时执行函数。应该注意几个已知的警告。这些都是：

  • 它不能始终如一地工作，也不能可靠地跨浏览器
  • 如果图像 src 设置为与以前相同的 src，它不会在 WebKit 中正确触发
  • 它没有正确地冒泡 DOM 树
  • 可以停止对已经存在于浏览器缓存中的图像进行触发

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

例子：

当页面完全加载时运行一个函数，包括图形。

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

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

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

相关用法


注：本文由纯净天空筛选整理自jquery.com大神的英文原创作品 .load()。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。