使用picasa的时候,注意到它首先是显示模糊的图片,然后图片突然变得清晰,这样做有一定的好处——picasa的图片翻页是用javascript实现的,如果直接载入大图,中间势必会有个空档,用户在这中间会感觉很空虚~~
于是我花了点时间,打探它的实现方式,发觉很简单,不是用的lowsrc之类的标记,而是简单的js。
代码示例
var img = new Image();
img.src = "http://imghost/big_640_480.jpg";
img.onload = function() {
document.getElementById('myImage').src = this.src;
}
如此这般,待大图载入完成之后,利用js替换原小图的src,就完成了图片预加载效果。关键点是图片的onload事件利用。
10 replies on “图片预加载效果的实现”
Google真有钱,一个图片居然以不同格式、不同大小存上好几份……
真不知道他的服务器到底有多大的硬盘……
这个好像很常见,一般的图片网站都说这么干的,呵呵。
百度空间里的照片也是这样的,先是模糊,然后清晰化!
对,处理方式是一样的
如果是实时处理.浪费的虽然不是硬盘,但是是CPU和内存.影响整体的响应速度和服务器利用率.你说是硬盘便宜还是整台服务器便宜.
简单的技术最稳定而且开销最小
GOOGLE的选择是没错的.
也有的图片应用是动态生成缩略图,前边加squid缓存起来
squid缓存动态图有大型应用吗?
我想内存如果掉电了 再缓存一次是不是很消耗?
不支持IE。
是先把小图拉大再替换的
IE让人很恼火,现在一般用FF