JavaScript懒加载图像

懒加载图像是一种优化网页性能的技术，它将页面中的图像延迟加载，即在用户需要查看它们之前不会立即加载。这种技术通常用于处理大量或大尺寸图像的网页，特别是那些包含长页面或大量媒体内容的网站。

好处

**1. 加快页面加载速度：**懒加载允许浏览器在初次渲染页面时不必加载所有图像，而只加载用户正在浏览或者即将浏览的部分。这减少了初始页面加载所需的时间，提高了页面的整体加载速度。
**2. 节省带宽和服务器资源：**延迟加载意味着不会同时请求所有图像资源，特别是对于长页面或包含大量图像的页面，这可以显著减少服务器的负载和带宽消耗。
**3. 改善用户体验：**用户在滚动页面时，只有那些即将进入视窗的图像才会被加载，这降低了页面的初次加载时间，使用户能更快速地浏览内容，提升了用户的整体体验。
**4. 降低跳出率：**快速加载页面和减少等待时间可以降低用户的跳出率，增加页面的停留时间，有助于提高页面的SEO排名和转化率。

如何实现

图像元素（标签）的src属性设置为占位符或者空字符串，例如data-src属性来存储实际图像的URL。

实例展示

● src中存储一个模糊的，内存非常小的图片，而data-src中存储的是真实的图片
在这里插入图片描述

● 我们需要做的是通过交叉观察点的方式来懒加载图片，当图片相交时替换src，并去除相应的模糊CSS
● 首先我们获取我们想要的HTML元素存储到变量中

const imgTargets = document.querySelectorAll('img[data-src]');

● 接着将我们观察点的条件和触发相交时候要做的事情的框架写出来

const loadImg = function (entries, observer) {

};

const imgObserver = new IntersectionObserver(loadImg, {
  root: null,
  threshold: 0,
});

● 使用Intersection Observer API观察图像元素的进入视窗情况，并在需要时加载它们。

imgTargets.forEach(img => imgObserver.observe(img));

● 接着我们需要写当图片进入窗口后我们要做的一系列的事情

const loadImg = function (entries, observer) {
  const [entry] = entries;
  if (!entry.isIntersecting) return;
  //替换src
  entry.target.src = entry.target.dataset.src;
  entry.target.addEventListener('load', function () {
    entry.target.classList.remove('lazy-img');
  })
  observer.unobserve(entry.target);
};

注意：将entry.target.classList.remove(‘lazy-img’);放入事件处理程序中的原因是
1. 确保图像加载完成： 在懒加载的情况下，图像的实际加载是延迟的，直到它进入视窗并且浏览器开始加载它。如果直接在 loadImg 函数中执行移除类操作，可能会在图像加载之前移除 lazy-img 类，导致 CSS 动画或其他样式效果不能正常显示。
2. 避免未加载完成时的问题： 如果 classList.remove(‘lazy-img’) 在图像加载之前执行，那么此时浏览器可能尚未设置好图像的 src 属性，也可能导致 CSS 动画或样式应用不正确，因为此时图像可能仍处于加载中状态或者尚未开始加载。
3. 确保顺序正确性： 将移除类操作放在 load 事件处理程序中可以确保在图像加载完成后立即移除 lazy-img 类。这样可以保证在图像展示给用户之前，所有必要的加载和处理步骤都已完成，从而确保用户体验的连贯性和视觉效果的正确性。

如果直接entry.target.classList.remove(‘lazy-img’);直接输出的话，用户网络缓慢的话会导致图片可能从模糊到清晰的事件很长

● 除此之外，为了不让用户感知我们图片的处理过程，我们可以加载边距，让没有滑动到图片之前按我们已经完成了图片的懒加载过程！

const imgObserver = new IntersectionObserver(loadImg, {
  root: null,
  threshold: 0,
  rootMargin: '200px',
});

完整代码如下

//懒加载图像
const imgTargets = document.querySelectorAll('img[data-src]');

const loadImg = function (entries, observer) {
  const [entry] = entries;
  if (!entry.isIntersecting) return;
  //替换src
  entry.target.src = entry.target.dataset.src;
  entry.target.addEventListener('load', function () {
    entry.target.classList.remove('lazy-img');
  })
  observer.unobserve(entry.target);
};

const imgObserver = new IntersectionObserver(loadImg, {
  root: null,
  threshold: 0,
  rootMargin: '200px',
});

imgTargets.forEach(img => imgObserver.observe(img));