如何实现前端图片懒加载的三种主流方法？

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

目录一. 什么为懒加载：二. 实现懒加载： 2.1 第一种方式： 2.2 第二种方式： 2.3 第三种方式（优）：三. 总结： 一. 什么为懒加载： 在我们访问一个展示大量网页时，图片等资源会依次加载，导致页面加载速度慢。懒加载则是只加载用户可视范围内的图片，其他图片在滚动到可视区域时再加载，从而提高页面加载速度。

目录

• 一.何为懒加载🌃：
• 二.实现懒加载🌄：
• 2.1 第一种方式：
• 2.2 第二种方式：
• 2.3 第三种方式（优）：
• 三.总结：

一.何为懒加载🌃：

  在我们访问一个图片展示比较多的网页时，加载速度慢很多时候正是因为图片多导致，大量的img图片导致页面渲染的堵塞。当费了许多力气把全部图片和页面加载出来时而用户早已离去。另一方面，若用户只查看了网页的前面部分便离开，许多已经加载却因为处于网页底部而未呈现在视口区的图片，它们极大加重服务器压力了但是用户看都没看，白白浪费了性能。

  为了解决上面的问题需要引入图片懒加载，懒加载其实很好理解，重点就是一个‘懒'字。当用户滚动相应可视区域，若可视区域有图片便加载，而在可视区域外未加载过的图片它们先不加载，如果用户滚动可视区域到它们时它们再加载，否则一律不加载。这样一来就大大提高了网页渲染的性能和减少不必要的浪费。