有時需要獲取圖片的尺寸，這需要在圖片載入完成以後才可以。有三種方式實現，下面一一介紹。

一、load事件

測試，所有瀏覽器都顯示出了“loaded”，說明所有瀏覽器都支援img的load事件

二、readystatechange事件

三、img的complete屬性

輪詢不斷監測img的complete屬性，如果為true則表明圖片已經載入完畢，停止輪詢。該屬性所有瀏覽器都支援。

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庫的支援，程式碼需要放置到需要操作元素的下方。