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