快捷導(dǎo)航

JavaScript實(shí)現(xiàn)判斷圖片是否加載完成的3種方法整理

更新時(shí)間：2015年03月13日 10:15:32 投稿：junjie

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

有時(shí)候我們?cè)谇岸碎_發(fā)工作中為了獲取圖片的信息，需要在圖片加載完成后才可以正確的獲取到圖片的大小尺寸，并且執(zhí)行相應(yīng)的回調(diào)函數(shù)使圖片產(chǎn)生某種顯示效果。本文主要整理了幾種常見的javascipt判斷圖片加載完成時(shí)的方法，并通過代碼與實(shí)際應(yīng)用相結(jié)合進(jìn)行解釋與說明。

onload方法

通過向img標(biāo)簽添加onload屬性，并填入相應(yīng)的函數(shù)來執(zhí)行后續(xù)的javascipt代碼。如下代碼例子中img元素默認(rèn)是不顯示的，通過onload判斷加載完成后再將圖片顯示出來。

復(fù)制代碼代碼如下:

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

<script type="text/javascript">

function get(ts){

 ts.style.display = 'block';  //顯示圖片

}

</script>

優(yōu)點(diǎn)：可以將javascript代碼部分放置于頁面的任何部分加載，并且可以用于多數(shù)任意圖片上。使用比較簡單，易理解。

缺點(diǎn)：必須在每個(gè)標(biāo)簽上都貼上onlaod屬性，在某些無法直接操作HTML代碼，或者需要代碼精簡的情況下不適用

javascipt原生方法

選取指定ID的圖片，通過onload指定回調(diào)方法，在圖片加載完成后彈出“圖片加載已完成”字樣提示。

復(fù)制代碼代碼如下:

<img id="pic1" src="..." />

<script language="JavaScript">

    document.getElementById("pic1").onload = function () {

        alert("圖片加載已完成");

    }

</script>

優(yōu)點(diǎn)：簡單易用，不影響HTML代碼。

缺點(diǎn)：只能指定一個(gè)元素，javascipt代碼必須置于圖片元素的下方

jquery方法

為每個(gè)class為pic1的圖片元素綁定事件，通過jquery的load方法，將元素漸現(xiàn)出來。

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

復(fù)制代碼代碼如下:

<script type="text/javascript">

$(function(){

 $('.pic1').each(function() {

  $(this).load(function(){

   $(this).fadeIn();

  });

    });

})

</script>

優(yōu)點(diǎn)：可以批量綁定元素事件，并且不影響HTML代碼內(nèi)容

缺點(diǎn)：需要jquery庫的支持，代碼需要放置到需要操作元素的下方。

您可能感興趣的文章: