使用picasa的时候，注意到它首先是显示模糊的图片，然后图片突然变得清晰，这样做有一定的好处——picasa的图片翻页是用javascript实现的，如果直接载入大图，中间势必会有个空档，用户在这中间会感觉很空虚~~
于是我花了点时间，打探它的实现方式，发觉很简单，不是用的lowsrc之类的标记，而是简单的js。好用的JS图片预加载类
代码示例
<img id="myImage" src="small_144.jpg" width="640" />
var img = new Image();
img.src = "http://imghost/big_640_480.jpg";
img.onload = function() {
document.myImage.src = this.src;
}
var img = new Image();
img.src = "http://imghost/big_640_480.jpg";
img.onload = function() {
document.myImage.src = this.src;
}
如此这般，待大图载入完成之后，利用js替换原小图的src，就完成了图片预加载效果。关键点是图片的onload事件利用。
站长工具
相关文章
请稍等，评论加载中...