关于页面懒加载

Question

关于图片多，资源多的页面，我采用雪碧图合并，资源压缩合并的方式。
但是还是很慢，因为合并的雪碧图变得特别大，臃肿，虽然减少了请求数，但是一个请求数的雪碧图，要加载很长时间。
想改用懒加载方式，就是当前只加载显示区域的图片。
看了一下jquery.lazyload.js这个插件，似乎要求图片都采用img的方式来引入，但是我之前写的，雪碧图都是背景图片，要改好多。请问是否由比较折中或者更优的处理方式来优化加载速度？

Answer 1

关于图片加载我有这么几个心得：
(这个可以不用引入js库)
1.小图片可以用base64
2.dom树加载完毕后，用js插入图片的src(注意之前不要把src置成空，干脆没有src然后给img一个固定宽度高度和背景色，src=""的话还是会浪费一个加载)
3.可以采用css,svg绘图。
4.图片像素真的不要太大，合适即可。
5.jpg,png都可以再次压缩，Google一下有很多开源工具。
6.函数节流，先加载首屏的图片，之后慢慢加载(通过时间延迟的方式、或者判断onscroll的方式）加载后面的图片。

我认为，不要把所有图片放在一张大图里面，logo啥的可以放在一个大图片里面，但是也要保证这个大图片不能太大

Answer 2

一般图标 logo之类的去做雪碧图、icon-font、base64之类的优化，业务图片就没有必要了，业务图片是有逻辑分支的合在一起适得其反。现在的浏览器都做了好多优化，HTTP1.1->SPDY->HTTP2.x等等都去做了很多请求上的优化，并不是请求越少加载时间越少。
懒加载与使用img或者背景图没有必然联系。懒加载只是加载资源，怎么用是自己代码的实现方式。img加载回来的图片资源，当使用background-image: url()的时候资源会先从浏览器缓存取，不强刷或不禁止缓存一般不会去向服务器发请求。当然你也可以吧img引资源的方式改成background-image: url()

Answer 3

1楼说的基本都差不多了，雪碧图的话，目的是减少请求数量，但是对于比较大的图片，最好还是img标签引入。
如果现在写的是背景，可以自己写一个懒加载的插件，通过改变背景图片的路径就可以了。
对于这个方式，你可以看看下面的文章：
图片延迟加载的实现