Javascript判斷圖片加載是否成功的方法

在作頁面的時候,常常碰到要在頁面加載徹底以後再去展示。這時候咱們會直接想到使用window.onload的方式,或者是採用Jquery的ready方法判斷,這在必定程度能夠搞定。

window.onload方式

  

Jquery的ready方法

 

可是上面的方法只能判斷Dom的加載狀態,不能判斷圖片是否加載成功。若是碰到頁面須要圖片加載完成才能展示的狀況,咱們就沒法搞定了。現提供兩種方式判斷圖片是否加載完成。

使用onload的圖片加載事件檢測

這裏是使用onload和onerror檢測判斷,可是有時候不能檢測到圖片是否加載完成,再使用過程當中,我發現它只是判斷全部圖片開始加載時就觸發了,不過基本能夠知足需求。

使用complete的圖片屬性檢測

這裏咱們採用定時器不斷檢測圖片的complete屬性,這個比較完美,只有圖片確實加載完成時,纔會變成真,因此比較可靠,建議採用。