图片预加载效果的实现

【转自】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事件利用。