當前位置: 首頁>>編程示例 >>用法及示例精選 >>正文

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()。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。