萬盛學電腦網

 萬盛學電腦網 >> 腳本專題 >> javascript >> JavaScript實現判斷圖片是否加載完成的3種方法整理

JavaScript實現判斷圖片是否加載完成的3種方法整理

 這篇文章主要介紹了JavaScript實現判斷圖片是否加載完成的3種方法整理,本文講解了onload方法、javascipt原生方法、jquery方法三種方法,需要的朋友可以參考下

   

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

onload方法

通過向img標簽添加onload屬性,並填入相應的函數來執行後續的javascipt代碼。如下代碼例子中img元素默認是不顯示的,通過onload判斷加載完成後再將圖片顯示出來。

 

代碼如下:
<img class="pic1" onload="get(this)" src="..." style='display:none' />

<script type="text/javascript">
function get(ts){
ts.style.display = 'block'; //顯示圖片
}
</script>

 

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

缺點:必須在每個標簽上都貼上onlaod屬性,在某些無法直接操作HTML代碼,或者需要代碼精簡的情況下不適用

javascipt原生方法

選取指定ID的圖片,通過onload指定回調方法,在圖片加載完成後彈出“圖片加載已完成”字樣提示。

代碼如下:
<img id="pic1" src="..." />

<script language="JavaScript">
document.getElementById("pic1").onload = function () {
alert("圖片加載已完成");
}
</script>
優點:簡單易用,不影響HTML代碼。

 

缺點:只能指定一個元素,javascipt代碼必須置於圖片元素的下方

jquery方法

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

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

代碼如下:
<script type="text/javascript">
$(function(){
$('.pic1').each(function() {
$(this).load(function(){
$(this).fadeIn();
});
});
})
</script>
優點:可以批量綁定元素事件,並且不影響HTML代碼內容

 

缺點:需要jquery庫的支持,代碼需要放置到需要操作元素的下方。

copyright © 萬盛學電腦網 all rights reserved