圖片預加載效果的實現

【轉自】http://www.ooso.net/index.php/archives/423

 

 

使用picasa 的時候，注意到它首先是顯示模糊的圖片，然後圖片突然變得清晰，這樣做有一定的好處——picasa的圖片翻頁是用javascript 實現的，如果直接載入大圖，中間勢必會有個空檔，用戶在這中間會感覺很空虛~~

於是我花了點時間，打探它的實現方式，發覺很簡單，不是用的lowsrc之類的標記，而是簡單的js。

代碼示例

PLAIN TEXT

CODE:

1. <img id="myImage" src="small_144.jpg" width="640" />
2. var img = new Image( ) ;
3. img.src = "http://imghost/big_640_480.jpg" ;
4. img.onload = function( ) {
5.   document.getElementById ( 'myImage' ) .src = this.src ;
6. }

如此這般，待大圖載入完成之後，利用js替換原小圖的src，就完成了圖片預加載效果。關鍵點是圖片的onload事件利用。