为什么有的网页打开图片是从上到下逐行打开,有的则是先显示低分辨率图片再逐渐加入细节?
2013-05-04 20:40
429 查看
本文转自:http://www.zhihu.com/question/19773824
alswl,前端爱好者
感谢@吴亚桐 回答给我找到线索,感谢提问者的好问题,我为这个问题曾经困惑了多年。这种渐进式载入方法容易和其他渐进式载入混淆。
我这里小总结一下几种渐进式载入办法。
js延迟载入,当浏览器滚动条拉到下面时候才显示出图片,参考 http://www.neoease.com/lazy-load-jquery-plugin-delay-load-image/
使用两张一大一小照片,小的先显示,等大图片完全下载好之后再载入。参考 http://blog.rexsong.com/?p=929
图片渐进式技术,也就是本问题。
大图片切割成小图片,逐个载入,这是互联网早期方式,现在已经几乎看不到了。太浪费http连接了。
下面是答案
-----------------------------------
浏览器下载图片的时候渐进式载入,这样下载完一张图可以看到它的样子,只不过只是不清楚的图,这样可以减少你等待看它的时间。
实际上有两种方式可以实现这种渐进式效果,一种是图像隔行扫描(Interlace),中文可以成为交错,另外一种叫做图像渐进式扫描(Progressive)。
隔行扫描可以在gif/png中实现。隔行GIF是指图像文件是按照隔行的方式来显示的,比如先出奇数行,再出偶数行,造成图像是逐渐变清楚的。将图像文件保存成隔行GIF格式的方法是,在 Photoshop中进行保存时,选择“Interlaced”(不要选择“Normal”),在Paint Shop Pro中进行保存时,点击“Option…”按钮,选择“Interlaced”(不要选择“Non
Interlaced”)。
渐进式扫描在在jpg中实现。逐级JPG文件可以让图像先以比较模糊的形式显示,随着图像文件数据不断从网上传过来,图像会逐渐变清晰。这样做的好处是图像可以尽快地显示出来,虽然图像不很完美,但是却让浏览者看到了希望,并且图像在不断地变好。将图像文件保存成逐级JPG格式的方法是,在Photoshop中进行保存时,选择“Progressive”,在Paint
Shop Pro中进行保存时,点击“Option…”按钮,选择“Progressive encoding”。
参考
/article/2568661.html
http://www.libpng.org/pub/png/pngintro.html
alswl,前端爱好者
感谢@吴亚桐 回答给我找到线索,感谢提问者的好问题,我为这个问题曾经困惑了多年。这种渐进式载入方法容易和其他渐进式载入混淆。
我这里小总结一下几种渐进式载入办法。
js延迟载入,当浏览器滚动条拉到下面时候才显示出图片,参考 http://www.neoease.com/lazy-load-jquery-plugin-delay-load-image/
使用两张一大一小照片,小的先显示,等大图片完全下载好之后再载入。参考 http://blog.rexsong.com/?p=929
图片渐进式技术,也就是本问题。
大图片切割成小图片,逐个载入,这是互联网早期方式,现在已经几乎看不到了。太浪费http连接了。
下面是答案
-----------------------------------
浏览器下载图片的时候渐进式载入,这样下载完一张图可以看到它的样子,只不过只是不清楚的图,这样可以减少你等待看它的时间。
实际上有两种方式可以实现这种渐进式效果,一种是图像隔行扫描(Interlace),中文可以成为交错,另外一种叫做图像渐进式扫描(Progressive)。
隔行扫描可以在gif/png中实现。隔行GIF是指图像文件是按照隔行的方式来显示的,比如先出奇数行,再出偶数行,造成图像是逐渐变清楚的。将图像文件保存成隔行GIF格式的方法是,在 Photoshop中进行保存时,选择“Interlaced”(不要选择“Normal”),在Paint Shop Pro中进行保存时,点击“Option…”按钮,选择“Interlaced”(不要选择“Non
Interlaced”)。
渐进式扫描在在jpg中实现。逐级JPG文件可以让图像先以比较模糊的形式显示,随着图像文件数据不断从网上传过来,图像会逐渐变清晰。这样做的好处是图像可以尽快地显示出来,虽然图像不很完美,但是却让浏览者看到了希望,并且图像在不断地变好。将图像文件保存成逐级JPG格式的方法是,在Photoshop中进行保存时,选择“Progressive”,在Paint
Shop Pro中进行保存时,点击“Option…”按钮,选择“Progressive encoding”。
参考
/article/2568661.html
http://www.libpng.org/pub/png/pngintro.html
相关文章推荐
- [转]为什么有的网页打开图片是从上到下逐行打开,有的则是先显示低分辨率图片再逐渐加入细节?
- 在JSP程序中我用新图片替换掉了原图片(名字,格式相同),为什么打开网页显示的还是以前的图片呢
- 打开网页不显示图片和视频
- 【解决办法】打开网页后有的图片是“叉”,无法显示
- 微信打开网页时图片显示模糊的问题
- 问答解题:为什么打开网页的时候图片和文字比较模糊【rmzt】
- 为什么我打开QTP以后,active screen总是提示无法显示网页---终于解决了
- 一个简单的全屏图片上下打开显示网页效果示例
- 网页中为什么不显示图片
- 数组保存图片地址然后输出到网页为什么只显示最后一张
- 为什么用360浏览器打开网页显示不正常而其他浏览器都正常
- win7系统IE浏览器网页受到恶意软件破坏导致无法显示图片视频或无法打开网页的解决方法
- 【解决】为什么网页都完全显示出来且打开了,状态栏左下角还显示"正在打开网页..."?
- 一个简单的全屏图片上下打开显示网页效果示例
- WebView加载网页不显示图片解决办法
- 网页标题显示为图片的HTML代码
- jsp本地打开显示图片但是部署到tomcat后图片不显示
- HTML5 之 FileReader 的使用 (网页上图片拖拽并且预显示可在这里学到) [转载]
- 母板与内容页login.aspx都在同一目录下,为什么图片显示路径明明正确,却显示不出来?
- OWA访问网页不是显示图片只显叉叉