图片预加载效果的实现

使用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 “图片预加载效果的实现”

  1. Google真有钱,一个图片居然以不同格式、不同大小存上好几份……

    真不知道他的服务器到底有多大的硬盘……

  2. 如果是实时处理.浪费的虽然不是硬盘,但是是CPU和内存.影响整体的响应速度和服务器利用率.你说是硬盘便宜还是整台服务器便宜.
    简单的技术最稳定而且开销最小
    GOOGLE的选择是没错的.

Comments are closed.