声明：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更节省性能。
如果你们公司的网页加载速度标准很苛刻，做完基础的加速措施后，不妨也尝试下以上两点小优化。
居然坐到沙发了 嗯这不科学
只能用在固定大小显示的图片，如果是平铺之类就没办法了
例子不明显，哈哈。
现在又回归扁平化了，图片越来越少了的说
扁平化，跟图片多少应该是没关系吧
不错，优化从点滴做起
之前我也扒皮的时候不明白为啥一张图有n多小图标，然后依葫芦画瓢弄了出来，再后来就明白怎么回事，现在恨不得把所有的图放一张里….介个.load_box木有看懂….
论优化的重要性
回头试试
学习了，图片多的站很有必要这么用啊
您的聊IT评论网好久不更新了 😮
恩恩，优化很重要
学习学习 😛
黑枸杞树苗http://www.heigouqi.cn 您好，能否友情链接QQ171565-8817
第二个demo, 得不偿失, 两个图虽然请求多了一个, 但是图片大小比一整个要小太多
额，你这个观点我不是很赞同。多张小图片的总大小，比一张大图片，要大。
https://ximan.org/125.html
看这篇文章里2个截图
你要上法庭就上，如果法庭最后是判给你，我也无话可说，今后你也不许再来打扰我的生活！”
白乐雅的忍耐度也是有限的，此时她的火气也啵啵的往上冒，两人的怒火足可以将对方烧得灰飞烟灭！
“哼，白乐雅，原来你真想抛夫弃子跟姘头远走高飞，你这么容易妥协不就是因为这个原因吗？我成全你！”慕容昊此刻已怒火攻心！http://seesasa.com/ff/4444.html