如何通过JavaScript轻松实现图片的懒加载效果？

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

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

概述图片懒加载是一种优化网页性能的技术，它通过延迟加载图片来减少首屏加载时间，从而提高用户体验。本文将介绍如何使用JavaScript和CSS实现图片懒加载，并探讨其优化效果。

目录

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

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