Vue前端面试题总结（十一）什么是图片懒加载详解

为什么要使用懒加载

主要目的是作为服务器前端的优化，减少请求数或延迟请求数,为服务器减小压力

实现原理

先加载一部分数据，当触发某个条件时异步加载剩余数据，新得到的数据不会影响原有数据的显示，同时最大程度上的减少服务器端的资源消耗

实现方式

1. 第一种是纯粹的延迟加载，使用seTimeOut或setInterval进行加载延迟
2. 第二种是条件加载，符合某些条件，或触发了某些事件才开始异步加载
3. 第三种是可视区域加载，即只加载用户可以看到的区域，这个主要由监控滚动条来实现，一般会在某用户看到某图片前一定距离开始加 载，这样能保证用户下拉时正好能看到图片

什么是图片懒加载

懒加载是网页的性能优化 是针对于服务器的请求作优化
就比如说图片，图片一直是影响网页性能的主要元凶，现在一张图片超过几兆已经是很经常的事了。如果每次进入页面就请求所有的图片资源，那么可能等图片加载出来用户也早就走了。所以 我们需要懒加载，进入页面的时候，只请求可视区域的图片资源。

图片懒加载原理
图片就是一个标签，而图片的来源主要是 src 属性。浏览器是否发起亲求就是根据是否有 src 属性决定的。
既然这样，那么我们就要对标签的 src 属性下手了，在没进入可视区域的时候，我们先不给这个标签赋 src 属性，这样岂不是浏览器就不会发送请求了。