載入事件

分類：事件 > 文件載入
繫結事件處理常式至「載入」事件，或在元素上觸發該事件。

內容

.on( "load" [, eventData ], handler )傳回：jQuery

說明：繫結事件處理常式至「載入」事件。

此頁面說明 load 事件。有關在 jQuery 3.0 中移除的 .load() 方法，請參閱 .load()。

當元素及其所有子元素已完全載入時，會傳送 load 事件給元素。此事件可傳送給與 URL 相關聯的任何元素：圖像、腳本、框架、內嵌框架和 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
} );

在每個影像載入時，將 class bigImg 加入高度大於 100 的所有影像。

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