渐进式jpg和交错式gif png图片的实现方法（网站图片从模糊到清晰的实现方法）
有同学问，网站相册里的图片是怎么从模糊变的清晰的？其实，这是图片的渐进和交错，显示时先大概显示图像的草图，当文件全部下载后再填充细节。这起到一种很有意义的心理效果，因为这样使人们有东西可看，而不必坐着干等大型图像慢慢显示在屏幕上。

在html中 IMG 有个 lowsrc 属性<img lowsrc=”" src=”" width=”300″ height=”200″ border=”0″ />把图片的缩略图 放在lowsrc里面，这样的话因为缩略图是缩小的，按照原图片的比例显示就会有马赛克！src里填写 原图片！这样的话，原图片比较大，下载的慢，lowsrc的缩略图小加载快，所以会先显示被拉伸的缩略图，等大图下载完成后会显示原图，这样有个时间差，就是出现先由马赛克，然后变清晰的效果！注意，测试的时候最好在远程服务器上，这样效果比较明显，本机的话，下载太快了，可能感觉不出来。

首先在上传文件的时候，用PHP 的GD库来生成缩略图。

不过，经测试 img 的lowsrc属性好像没有什么用，下面是我写的代码。

其中：10.jpg是缩略图，1.jpg是原图。

1
2
3
4
5
6
7
8

<img src="10.jpg" name="myImage" width="501" height="552" id="myimage" /> 
<script type="text/javascript">
var img = new Image(); 
img.src = "1.jpg"; 
img.onload = function() { 
document.getElementById('myimage').src = this.src; 
}
</script>