西门的后花园

一个热爱网络的年轻人的博客

DOM懒加载和图片懒加载对于背景图片的优化建议

声明:1、本文只对非常大型的网站里一个小点的优化建议,普通网站不会用到;2、本文里写的js代码很烂,没有考虑性能,仅作为demo测试而已。

大型网站的首页加载速度是每个公司都非常重视的,而且还会列举各大同行的网站首页加载速度数据,来进一步提升自己网站的指标。网站加速无非那几点:服务器端的CDN、Gzip,后台的缓存、静态化,前端的CSS、js合并、减少http请求、DOM优化、懒加载等(随便列举)。本文讲的另外一个,背景图片的优化建议。

DOM懒加载

说到CSS Sprites,做前端的都知道,这个可以提升网站加载速度,减少http请求。但如果配合DOM懒加载,其实CSS Sprites还可以进一步优化!请看DEMO1

如果你使用的是火狐浏览器,打开Firebug,选到“网络–图片”那里,是看不到有图片加载的,也没有http请求。拉动滚动条,到第五个box,这个时候狗狗的背景图才出现,才加载这个http请求。这个背景图片的div,我是通过DOM懒加载出来的。其实CSS里有这样一个定论:如有没用到的CSS,是不会加载里面属性的,里面如果有背景图片的话,一样不会加载背景图片。所以你常常看到那些hover换背景图片的时候第二个图片会一闪,就是因为hover后才触发加载那一句:hover的CSS,那图片才慢慢加载。

结论:对于首页需要DOM懒加载来提速的,建议把Sprites图分开来拼。首屏直接加载出来的背景图片拼到一起,后面加载出来的通栏背景图片拼到一起,最后加载出来的底部背景图片拼到一起。而不是把首页所有背景图片都拼到一张图里。

图片懒加载

不知道有几个人会用到Image Sprites这个小众技巧,其实也很简单,就是利用负边距来实现的。请看DEMO2

因为我图片上默认加了个Loading图片,所以网页打开后只有一个图片http请求。一直把滚动条拉到第五个box,才请求狗狗的背景图。一般人做这种小图标,肯定会选择用CSS Sprites背景图片。其实尝试用Image Sprites也是个不错的选择,因为可以把他当作img标签来做图片懒加载,而背景图片是没办法图片懒加载的。

结论:如果你的网站结构不是很复杂,但图片多,会使用到图片懒加载的话,可以尝试下Image Sprites,这个比CSS Sprites更节省性能。

如果你们公司的网页加载速度标准很苛刻,做完基础的加速措施后,不妨也尝试下以上两点小优化。

评论列表

  1. 居然坐到沙发了 嗯这不科学

  2. 只能用在固定大小显示的图片,如果是平铺之类就没办法了

  3. 例子不明显,哈哈。

  4. 现在又回归扁平化了,图片越来越少了的说

  5. 不错,优化从点滴做起

  6. 之前我也扒皮的时候不明白为啥一张图有n多小图标,然后依葫芦画瓢弄了出来,再后来就明白怎么回事,现在恨不得把所有的图放一张里….介个.load_box木有看懂….

  7. 论优化的重要性

  8. 学习了,图片多的站很有必要这么用啊

  9. 您的聊IT评论网好久不更新了 😮

  10. 恩恩,优化很重要

  11. 学习学习 😛

  12. 黑枸杞树苗http://www.heigouqi.cn 您好,能否友情链接QQ171565-8817

  13. 第二个demo, 得不偿失, 两个图虽然请求多了一个, 但是图片大小比一整个要小太多

  14. 你要上法庭就上,如果法庭最后是判给你,我也无话可说,今后你也不许再来打扰我的生活!”
    白乐雅的忍耐度也是有限的,此时她的火气也啵啵的往上冒,两人的怒火足可以将对方烧得灰飞烟灭!
    “哼,白乐雅,原来你真想抛夫弃子跟姘头远走高飞,你这么容易妥协不就是因为这个原因吗?我成全你!”慕容昊此刻已怒火攻心!http://seesasa.com/ff/4444.html

幻化成风进行回复 取消回复

分类目录