前端JS图片懒加载原理方案详解

什么是图片懒加载？

图片懒加载指的是在网页的滚动过程中，将未出现在视窗内的图片延迟加载，等到图片即将进入到可视区域时再将其加载。相对于一开始就加载所有图片的方式，图片懒加载能很大程度地减少页面渲染时的负担，节省带宽资源。

为什么需要图片懒加载？

随着富媒体网站的发展，页面上的图片数量越来越多，而把所有图片一开始就加载出来很容易造成页面加载缓慢，用户体验很差。因此，实现图片懒加载不仅可以提升用户体验，也可以提高页面的性能。

实现方式

图片懒加载的实现方式有多种，其中最常用的方式是利用 Javascript 编写实现。

1. 使用懒加载库

目前市面上常用的 js 懒加载库有 Lazyload.js 和 layzr.js 等。这些库已经考虑了各种情况，使用这些库能够很快速地实现图片懒加载。

Lazyload.js 库中只需要加入以下代码，即可轻松完成图片懒加载：

var lazyload = new LazyLoad({
    elements_selector: ".lazy"
});

2. 自行编写懒加载脚本

自行编写懒加载脚本需要考虑到以下几个问题：

• 如何获取需要加载的图片
• 如何判断图片是否进入可视区域
• 加载成功以后的处理

下面给出一个基于 Intersection Observer API 的懒加载脚本实现。

// 获取所有需要懒加载的img标签
let images = document.querySelectorAll("img[data-src]");

let observer = new IntersectionObserver(function(entries) {
  entries.forEach(function(entry) {
    if (entry.intersectionRatio > 0) {
      // 进入可视区域，进行加载
      entry.target.setAttribute("src", entry.target.getAttribute("data-src"));
      observer.unobserve(entry.target);
    }
  });
});

// 逐个监控每个需要懒加载的img标签
for (let i = 0; i < images.length; i++) {
  observer.observe(images[i]);
}

示例说明

示例1

为了展示示例1，我们先准备一个大量图片的页面，然后编写下面的 HTML 代码：

<div class="gallery">
  <img data-src="image1.jpg" />
  <img data-src="image2.jpg" />
  <img data-src="image3.jpg" />
  <img data-src="image4.jpg" />
  <img data-src="image5.jpg" />
  <img data-src="image6.jpg" />
  <img data-src="image7.jpg" />
  <img data-src="image8.jpg" />
  <img data-src="image9.jpg" />
  <img data-src="image10.jpg" />
</div>

然后引入 Lazyload.js 库，并解析所有的延迟加载图片。

<script src="path/to/Lazyload.js"></script>
<script>
  var lazyload = new LazyLoad({
      elements_selector: ".gallery img"
  });
</script>

示例2

为了展示示例2，我们还是先准备一个大量图片的页面，然后编写下面的 HTML 代码：

<div class="gallery">
  <img data-src="image1.jpg" />
  <img data-src="image2.jpg" />
  <img data-src="image3.jpg" />
  <img data-src="image4.jpg" />
  <img data-src="image5.jpg" />
  <img data-src="image6.jpg" />
  <img data-src="image7.jpg" />
  <img data-src="image8.jpg" />
  <img data-src="image9.jpg" />
  <img data-src="image10.jpg" />
</div>

然后我们编写下面的 JavaScript 代码：

let images = document.querySelectorAll(".gallery img");
let observer = new IntersectionObserver(function(entries) {
  entries.forEach(function(entry) {
    if (entry.intersectionRatio > 0) {
      // 进入可视区域，进行加载
      entry.target.setAttribute("src", entry.target.getAttribute("data-src"));
      observer.unobserve(entry.target);
    }
  });
});

images.forEach(function(image) {
  // 判断并监控每个img元素
  if (image.offsetTop < window.innerHeight) {
    image.setAttribute("src", image.getAttribute("data-src"));
  } else {
    observer.observe(image);
  }
});

我们首先找到所有需要懒加载的img元素，然后通过 Intersection Observer API 来监控每个img元素。对于已经进入可视区域的img元素，直接加载他的src属性；对于那些尚未进入可视区域的img元素，等待浏览器触发相应的scroll事件后再进行加载操作，从而实现图片懒加载功能。

以上是前端JS图片懒加载的原理方案详解，希望对你有所帮助！

阅读剩余 65%