JavaScript實作判斷圖片是否載入完成的3種方法整理_javascript技巧

有時候我們在前端開發工作中為了獲取圖片的信息，需要在圖片加載完成後才可以正確的獲取到圖片的大小尺寸，並且執行相應的回調函數使圖片產生某種顯示效果。本文主要整理了幾種常見的javascipt判斷圖片載入完成時的方法，並透過程式碼與實際應用結合進行解釋與說明。

onload方法

透過在img標籤上新增onload屬性，並填入對應的函數來執行後續的javascipt程式碼。如下程式碼範例中img元素預設是不顯示的，透過onload判斷載入完成後再將圖片顯示出來。

複製程式碼 程式碼如下:

 

優點：可以將javascript程式碼部分放置於頁面的任何部分加載，並且可以用於多數任意圖片上。使用比較簡單，容易理解。

缺點：必須在每個標籤上都貼上onlaod屬性，在某些無法直接操作HTML程式碼，或需要程式碼精簡的情況下不適用

javascipt原生方法

選取指定ID的圖片，透過onload指定回呼方法，在圖片載入完成後彈出「圖片載入已完成」字樣提示。

複製程式碼 程式碼如下:

 

優點：簡單易用，不影響HTML程式碼。

缺點：只能指定一個元素，javascipt程式碼必須置於圖片元素的下方

jquery方法

為每個class為pic1的圖片元素綁定事件，透過jquery的load方法，將元素漸現出來。

注意，不要在$(document).ready()裡綁定load事件。

複製程式碼 程式碼如下:

優點：可以批次綁定元素事件，且不影響HTML程式碼內容

缺點：需要jquery函式庫的支持，程式碼需要放置到需要操作元素的下方。