图片加载 背景色块问题

就是CSS的加载和背景图片的加载不是同步的，尤其首次加载的时候，图片是异步的，具有明显的延迟，于是，我们会看到非常丑陋的色块在一瞬间出现了；

页面渲染流程如下，1. CSS加载；2. 对应DOM渲染，背景色出现；3.拉取DOM样式对应背景图片。

图片在异步加载的（图片有北背景颜色）：

一开始时候宽 高都为0，加载完之后才现在宽高，所以会看到有的网站在图片出现之后高度蹭蹭的长，这样的的问题：就是图片加载完之后页面需要重新的渲染，影响加载性能。

解决办法：

给存放图片的div一个高度，没有宽度，这样加载时，虽然就背景色，但是宽度为0，所以就不显示背景色，不会出现色块；

但是还有有个问题：

图片在加载时是从上到下加载的:所有还是出现图片的上一部分已加载完毕下部分显示的背景色，解决办法：

在保存图片时：jpg的图片保存选择   连续    png的图片选择 交 错   ok 解决

jpg格式的图片在呈现的时候，有两种方式，一种是自上而下扫描式的，还有一种就是先是全部的模糊图片，然后逐渐清晰(就像GIF格式的交错显示)

一般的图片都是第一中呈现模式，第二种属于渐进式图片：

Chrome + Firefox + IE9浏览器下，渐进式图片加载更快，而且是快很多，至于其他浏览器，与基本式图片的加载一致，至少不会拖后腿。

Scott Gilbertson对渐进式图片有其他的补充：
1. 你 不知道基本式图片内容，除非他完全加载出来；
2. 渐进式图片一开始大小框架就定好，不会像基本式图片一样，由于尺寸未设定而造成回流——提高的渲染性能；
3. 渐进式图片也有不足，就是吃CPU吃内存。

一般而言，大尺寸图片建议使用渐进式JPEG.

渐进式JPEG创建

 photoshop生成
大伙都知道photoshop中有个“存储为web所用格式”，然后，那个连续勾选就是渐进式JPEG图片了：

据说，需要勾选那个转换为sRGB选项，在某些浏览器下，图像设置为CMYK会出现一些问题！

 

 

 

 

 

总结来自：http://www.zhangxinxu.com/wordpress/2013/01/progressive-jpeg-image-and-so-on/

转载于:https://www.cnblogs.com/xiaofenguo/p/6283235.html