js图片的延迟加载

一、基础概念

1. 定义
   • 图片的延迟加载（Lazy Loading）是一种优化网页性能的技术。在初始页面加载时，不立即加载所有图片，而是等到图片即将进入浏览器的可视区域（通常是视口）时才加载它们。

• 原理
  • 主要基于监听滚动事件或者利用浏览器提供的Intersection Observer API来确定图片是否即将显示给用户。当图片进入预定义的可视区域范围时，再将图片的真实源（src属性）替换为预先准备好的占位符（例如低分辨率图片或者空白图片）对应的真实图片地址，从而触发浏览器加载图片。

二、相关优势

1. 提高页面加载速度
   • 减少了初始页面加载时需要下载的资源量。特别是对于包含大量图片的网页，如图片画廊、新闻网站等，可以显著缩短首次加载时间，提升用户体验。

• 节省带宽
  • 避免加载用户可能看不到的图片，对于移动设备用户或者网络带宽有限的用户来说，可以减少不必要的流量消耗。
• 优化服务器资源利用
  • 服务器不需要一次性发送所有图片资源，降低了服务器的负载压力。

三、类型

1. 基于滚动事件监听的延迟加载
   • 这种方式通过JavaScript不断监听窗口的滚动事件，计算每个图片元素相对于视口的位置。当图片进入可视区域时加载图片。但是这种方式可能会因为频繁触发滚动事件而导致性能问题，需要进行节流（throttle）或者防抖（debounce）处理。
   • 示例代码：
   • 示例代码：

• 基于Intersection Observer API的延迟加载
  • 这是一种更现代、高效的方式。它创建一个观察者对象，指定要观察的目标元素（图片）和一个回调函数。当目标元素的可视状态发生变化（进入或离开可视区域）时，回调函数会被调用。
  • 示例代码：
  • 示例代码：

四、应用场景

1. 长页面
   • 如电商产品列表页面，有很多产品图片，延迟加载可以让页面快速显示部分内容，用户滚动时再加载更多图片。

• 移动应用中的图片展示
  • 在移动端的新闻阅读、社交类应用中，图片延迟加载可以提高应用的启动速度和响应速度，节省用户流量。

五、可能遇到的问题及解决方法

1. 图片闪烁问题
   • 原因：当图片进入可视区域加载时，可能会因为网络延迟等因素导致图片加载完成后重新布局，产生闪烁现象。
   • 解决方法：可以使用CSS设置图片的占位符大小与真实图片大小一致，或者使用渐进式加载技术，先显示低分辨率图片再替换为高分辨率图片。

• 兼容性问题
  • 原因：Intersection Observer API在一些旧版本的浏览器中不被支持。
  • 解决方法：对于不支持的浏览器，可以回退到基于滚动事件监听的延迟加载方式，可以使用polyfill库来增加兼容性。