关于页面懒加载

jiangl
  • 761

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

回复
阅读 3.4k
3 个回答

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

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

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

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

你知道吗?

宣传栏