西门的后花园

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

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更节省性能。

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

评论已关闭

分类目录