js如何判斷<img>圖片是否載入完畢

antzone發表於2017-04-03

圖片的應用大家自然就不用說了,如果一個網站沒有圖片,實在想象不出這樣的網站是什麼樣子。

我們經常需要當圖片完全載入完畢再去執行相應的操作。

所以就需要判斷圖片是否已經載入完畢,下面就介紹一下如何實現此功能,需要的朋友可以做一下參考。

使用onload事件:

使用此事件可以判斷<img>圖片是否載入完成。

看如下程式碼例項:

[HTML] 純文字檢視 複製程式碼
<img id="antzone" src="softwhy.jpg" />
<script type="text/javascript">
document.getElementById("antzone").onload=function(){
  alert("圖片載入已完成");
}

上面的程式碼實現了判斷功能,但是有一個不算缺點的缺點(其實推薦如此使用),js程式碼只能夠放在<img>標籤的後面。

當然onload事件可以寫在標籤之內,程式碼如下:

[HTML] 純文字檢視 複製程式碼
function get(ts){
  ts.style.display = 'block';//顯示圖片
}
</script>
<img class="antzone" onload="get(this)"  src="softwhy.jpg" style='display:none'/>

相關文章