如何用JavaScript实现图片懒加载技术？

本文共计1745个文字，预计阅读时间需要7分钟。

目录实现思路准备知识data-* + getBoundingClientRect() + throttle + window.innerHeight + 完整代码JavaScript 部分CSS 部分运行结果总结图片懒加载，减少首屏白屏时间的解决方案

目录

• 实现思路
• 准备知识
• data-*
• getBoundingClientRect()
• throttle
• window.innerHeight
• 完整代码
• js部分
• CSS部分
• 运行结果
• 总结

图片懒加载，往往作为减少首页白屏时间的一个解决方案而出现。直观的来说，就是不要直接加载所有图片，而是满足一定条件后才加载，也就是”惰性加载“。实现图片懒加载的方式有很多，如果要简单点那就直接使用第三方插件：vue-lazyload，如果想探究一下别人的插件是怎么实现图片懒加载的，那么可以看看本文是如何实现的。

实现思路

实现图片懒加载我们需要先明白具体的场景，一般来说，我们会在首屏先加载几张图片，其他的图片则先不加载，在页面滚动时，图片快出现在视窗中的时候才来加载图片。