js的图片懒加载

一、基础概念

图片懒加载是一种优化网页性能的技术。在传统的网页加载中，页面中的所有图片（即使部分图片还未进入浏览器的可视区域）都会在页面加载时立即请求加载。而图片懒加载则是延迟加载那些不在可视区域的图片，只有当图片即将进入可视区域（例如用户滚动页面接近该图片位置）时才加载图片。

二、优势

1. 提高页面加载速度
   • 减少初始加载时的网络请求数量。对于包含大量图片的页面，如图片集网站或者长页面，如果不使用懒加载，浏览器需要一次性请求所有图片资源，这会消耗大量的带宽并延长页面加载时间。通过懒加载，只加载可视区域内的图片，初始加载速度会明显提升。

• 节省流量
  • 用户可能只浏览页面的部分内容，如果所有图片都预先加载，会造成不必要的流量浪费。懒加载确保只有用户可能看到的图片被加载，从而节省用户的流量，特别是对于移动设备用户来说非常重要。
• 提升用户体验
  • 页面能够更快地呈现给用户可视区域的内容，用户可以更快地开始与页面交互，并且在滚动浏览页面时图片按需加载，不会有长时间的等待感。

三、类型

1. 基于滚动事件的懒加载
   • 这是最常见的一种。通过监听浏览器窗口的滚动事件，计算图片距离可视区域顶部的距离，当距离小于某个阈值（例如视口高度）时，加载图片。
   • 示例代码（使用原生JavaScript）：
   • 示例代码（使用原生JavaScript）：

• 预加载懒加载（结合预加载机制）
  • 在图片即将进入可视区域之前就开始加载，例如提前几屏的距离就开始加载图片，以减少用户等待时间。

四、应用场景

1. 图片集网站
   • 如摄影作品展示网站，页面包含大量高分辨率图片，使用懒加载可以显著提高页面性能。

• 电商产品列表页面
  • 产品图片较多，通过懒加载可以让用户在浏览产品列表时更快地看到部分产品，并且在滚动查看更多产品时按需加载图片。
• 新闻资讯类网站的长文章配图页面
  • 文章中可能有多张图片，懒加载确保文章内容能够快速呈现给用户，图片在需要时再加载。