图片加载 背景色块问题
2017-01-13 16:29
225 查看
就是CSS的加载和背景图片的加载不是同步的,尤其首次加载的时候,图片是异步的,具有明显的延迟,于是,我们会看到非常丑陋的色块在一瞬间出现了;
页面渲染流程如下,1. CSS加载;2. 对应DOM渲染,背景色出现;3.拉取DOM样式对应背景图片。
图片在异步加载的(图片有北背景颜色):
一开始时候宽 高都为0,加载完之后才现在宽高,所以会看到有的网站在图片出现之后高度蹭蹭的长,这样的的问题:就是图片加载完之后页面需要重新的渲染,影响加载性能。
解决办法:
给存放图片的div一个高度,没有宽度,这样加载时,虽然就背景色,但是宽度为0,所以就不显示背景色,不会出现色块;
但是还有有个问题:
图片在加载时是从上到下加载的:所有还是出现图片的上一部分已加载完毕下部分显示的背景色,解决办法:
在保存图片时:jpg的图片保存选择 连续 png的图片选择 交 错 ok 解决
一般的图片都是第一中呈现模式,第二种属于渐进式图片:
Chrome + Firefox + IE9浏览器下,渐进式图片加载更快,而且是快很多,至于其他浏览器,与基本式图片的加载一致,至少不会拖后腿。
Scott Gilbertson对渐进式图片有其他的补充:
1. 你 不知道基本式图片内容,除非他完全加载出来;
2. 渐进式图片一开始大小框架就定好,不会像基本式图片一样,由于尺寸未设定而造成回流——提高的渲染性能;
3. 渐进式图片也有不足,就是吃CPU吃内存。
一般而言,大尺寸图片建议使用渐进式JPEG.
大伙都知道photoshop中有个“存储为web所用格式”,然后,那个连续勾选就是渐进式JPEG图片了:
据说,需要勾选那个转换为sRGB选项,在某些浏览器下,图像设置为CMYK会出现一些问题!
总结来自:http://www.zhangxinxu.com/wordpress/2013/01/progressive-jpeg-image-and-so-on/
页面渲染流程如下,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/
相关文章推荐
- QWebView中出现加载网页乱码、图片加载不出来的问题解决以级QMainWindow背景图片设置问题
- 背景图片加载不出问题的解决办法
- c# 窗体的背景图片在加载时,背景图片闪烁问题 已解决
- Glide使用心得——加载图片出现浅绿色背景问题和Glide加载完成的监听设置
- 关于利用webpy的框架下,HTML无法加载CSS和背景图片的问题
- 打印网页时背景图片的问题
- 【原】HTML页面元素加载顺序研究报告(2)----背景图片
- 自定义ListCtrl中设置背景图片的问题
- 自定义ListCtrl中设置背景图片的问题
- Struts 返回前一页面时,图片Css样式无法加载的问题
- 解决IE6中CSS使用透明背景图片的问题
- j2me在Eclipse环境上加载图片问题(Image.createImage)!
- 使用ATL库中的CImage类加载JPG图片作为对话框背景
- java 在本地文件中加载图片的问题
- 解决IE下图片作为背景时,有鼠标操作时的抖动问题:
- 图片的加载时机问题
- 【原】HTML页面元素加载顺序研究报告(3)----Script标签与背景图片
- 用户控件动态加载图片问题解决方法!
- 为对话框加载背景图片并在上面输出文本
- 终结IE6下背景图片闪烁问题