js 图片延迟加载

一、基础概念

图片延迟加载（Lazy Loading）是一种网页优化技术。在页面初始加载时，不立即加载所有图片，而是等到用户即将看到这些图片（例如图片进入浏览器的可视区域）时才加载它们。

二、优势

1. 提高页面加载速度
   • 减少初始页面加载时的网络请求数量。特别是对于图片较多的页面，如图片集网站或者电商产品展示页面，可以显著缩短首次渲染时间。

• 节省带宽
  • 避免加载用户可能不会看到的图片，对于移动设备用户来说，这有助于减少数据流量的消耗。

三、类型

1. 基于滚动事件监听
   • 通过JavaScript监听浏览器窗口的滚动事件，当图片距离可视区域一定距离（例如距离顶部小于某个阈值）时，加载图片。
   • 示例代码：
   • 示例代码：

• Intersection Observer API（推荐）
  • 这是一种更现代、高效的方式。它创建一个观察器，当目标元素（这里是图片）与指定的根元素（通常是视口）交叉达到一定条件时触发回调函数来加载图片。
  • 示例代码：
  • 示例代码：

四、应用场景

1. 长页面
   • 像新闻网站的长篇文章页面，其中包含很多插图，使用延迟加载可以让用户更快地看到文章的主要内容。

• 图片画廊
  • 在展示大量图片的画廊中，提高页面加载效率并优化用户体验。
• 移动应用中的图片展示
  • 移动设备网络资源相对有限，延迟加载可以节省用户流量并加快应用启动和页面切换速度。

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

1. 图片闪烁问题
   • 原因：当图片开始加载时可能会出现布局调整，导致图片闪烁。
   • 解决方法：可以给图片设置固定的宽度和高度，或者使用CSS的visibility属性先隐藏图片，在加载完成后再显示。
   • 示例代码（使用固定宽高）：
   • 示例代码（使用固定宽高）：
   • 示例代码（使用visibility）：
   • 示例代码（使用visibility）：

• 兼容性问题
  • 部分旧版本的浏览器可能不支持Intersection Observer API。
  • 解决方法：可以使用polyfill库来提供兼容性支持，或者回退到基于滚动事件监听的方式。