图片预加载效果的实现

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