技术分享 Technology to share

前端图片加载方式

前端图片加载方式

研究前端图片加载方式

第一种、逐行加载


第二种、隔行扫描(模糊加载)


第三种、伪模糊加载




浏览器下载图片的时候渐进式载入,这样下载完一张图可以看到它的样子,只不过只是不清楚的图,这样可以减少你等待看它的时间。

实际上有两种方式可以实现这种渐进式效果,一种是图像隔行扫描(Interlace),中文可以成为交错,另外一种叫做图像渐进式扫描(Progressive)。

  1. 隔行扫描可以在gif/png中实现。隔行GIF是指图像文件是按照隔行的方式来显示的,比如先出奇数行,再出偶数行,造成图像是逐渐变清楚的。将图像文件保存成隔行GIF格式的方法是,在 Photoshop中进行保存时,选择“Interlaced”(不要选择“Normal”),在Paint Shop Pro中进行保存时,点击“Option…”按钮,选择“Interlaced”(不要选择“Non Interlaced”)。
  2. 渐进式扫描在在jpg中实现。逐级JPG文件可以让图像先以比较模糊的形式显示,随着图像文件数据不断从网上传过来,图像会逐渐变清晰。这样做的好处是图像可以尽快地显示出来,虽然图像不很完美,但是却让浏览者看到了希望,并且图像在不断地变好。将图像文件保存成逐级JPG格式的方法是,在Photoshop中进行保存时,选择“Progressive”,在Paint Shop Pro中进行保存时,点击“Option…”按钮,选择“Progressive encoding”。

参考

http://blog.csdn.net/greenerycn/article/details/1458231

http://www.libpng.org/pub/png/pngi


测试图片文件截取部分是否可以显示


JPEG的压缩模式

  • 顺序式编码(Sequential Encoding)
  • 递增式编码(Progressive Encoding)
  • 无失真编码(Lossless Encoding)
  • 阶梯式编码(Hierarchical Encoding)

@参考资料 @解析参照





https://blog.csdn.net/code_for_free/article/details/51290067

上一篇: 理解JS中的call、apply、bind方法

下一篇: 以抵达网站尽头. . .