妙用png的"逐次逼近显示"

今天在群里，有位朋友问到一个问题：

http://sufa.cnodejs.net/work/4386 这种图片向下逐渐显示展示是怎么实现的。即一般图片显示是直接显示全部内容的，它是怎么做到一部份一部份显示的呢？

其实，这个是因为采用了png的"逐次逼近显示"特性。

 

逐次逼近显示　　

这种特性可使在通信链路上传输图像文件的同时就在终端上显示图像，把整个轮廓显示出来之后逐步显示图像的细节，也就是 先用低分辨率显示图像，然后逐步提高它的分辨率。

 

PNG交错在使用浏览器欣赏该图片时就会以由模糊逐渐转为清晰的效果方式渐渐显示出来。

PNG先进的交错式方法，使图像得以水平及垂直方式显像在屏幕上，加快了下載的速度，作用：交错可使下载时间感觉更短，并使浏览者确信正在进行下载。

PNG无交错、不交错就没这个作用。

 

jpg png都支持交错，如果设置了交错，浏览器会渐进渲染，如果没设置，则不支持渐进渲染。

渐进渲染是需要浏览器渲染引擎支持的。

 

 

设置方法：

 

 

参考：

百度百科：http://baike.baidu.com/view/5342.htm