serenader
2020-03-31 16:46:32 +08:00
前面说懒加载没用的估计都不是前端开发者吧。在我看来,图片懒加载不仅仅只是用来减少带宽压力,更重要的是它能实实在在地提升页面的加载性能,能够让你的性能数据更好看。
我司好多项目都用了这个特性,性能优化效果挺明显的。当然懒加载并不是单纯地把所有图片都做懒加载这么简单,通常只是给不在视窗范围内的图片才做懒加载。
如果要再考虑用户体验的话,那么可以在页面 onload 之后,或者第一张图片加载完成之后再开始使用 Preload 或者 Prefetch 去进行预加载后面的懒加载图片,这样的好处是可以充分利用网络空闲的时候去提前下载好这些图片,不用等到用户滚动到图片位置才开始加载。而且使用 Preload 或者 Prefetch 的好处是,它不会影响你的性能指标。是不是很棒?这样一番操作下来,其实跟你页面直接加载所有图片的效果类似,只是浏览器转圈圈的时间缩短了很多,页面加载性能也提升上来了。
对于 RSS 阅读器,以及爬虫的话,其实在服务端做个适配就行了,对特定 UA 做特殊处理,直接吐完整的图片标签,而不用懒加载,问题不就解决了。
所以回过头来看,懒加载有用吗?当然有用。前面的 V 友提到的用户体验不好,那只是部分网站没有做进一步优化而已。优化做得好的话体验基本跟不使用懒加载一致的。但是懒加载收益是提升了性能。
对图片优化感兴趣的同学可以看看这个手册: https://images.guide
另外对于楼主提到的 loading="lazy" 这个特性来说,目前很少浏览器支持,我个人建议可以做个兼容,低版本浏览器使用 IntersectionObserver 来进行懒加载。