图片懒加载实现-CSDN博客

本文链接：https://blog.csdn.net/m0_65655447/article/details/134179537

图片懒加载实现

图片懒加载的思路:
1.最开始加载页面的时候，IMG的SRC不赋值(这样就不会加载真实图片，把真实图片的地址赋值给IMG的自定义属性，方便后期想要加载真实图片时候获取)
2.如果SRC不赋值或者加载图片是错误的，会显示“碎图”，这样样式不美观，所以: 我们最开始让IMG是隐藏的可以设置display、也可以设置透明度为0(透明度改变可以设置过渡效果)
3.给图片所在的盒子设置背景占位图(或者背景颜色)，在真实图片没有加载之前，用其占位盒子宽高事先设置好的

图片懒加载是一种优化网页性能的技术，它延迟加载页面上的图像，以减少初始页面加载时间。这对于提高用户体验和减少带宽使用非常有用。以下是一种实现图片懒加载的简单方法：

HTML结构：首先，你的HTML结构应该包含要懒加载的图片标签，例如。可以为每个图片添加一个data-src属性，用于存储图像的实际src属性值。

<div class="pic-box">
<img data-src="image1.jpg" alt="Image 1">
</div>
<div class="pic-box">
<img data-src="image2.jpg" alt="Image 2">
</div>
<div class="pic-box">
<img data-src="image3.jpg" alt="Image 3">
</div>

CSS：你可以使用CSS来控制图像的样式，例如指定图像的宽度和高度，以确保在加载前占据正确的空间。img src为空图片会碎图，先设置图片不可见，设置一个占位图或背景色

.pic-box {
	box-sizing:border-box;
	margin:20px auto;
	width:600px;
	height:337px;
	background:#ddd;
}
img {
  width: 100%;
  height: 100%;
  opacity:0;
  transition:opacity .3s;
}

JavaScript：使用JavaScript来实现懒加载。当页面滚动到图像的可见部分时，你可以将data-src属性的值复制到src属性，并加载图像。你可以使用Intersection Observer API 来监测元素是否可见。

// 获取所有带有data-src属性的图像
const lazyImages = document.querySelectorAll('img[data-src]');

// 创建Intersection Observer实例
const observer = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      img.onload=()=>{
      		img.style.opacity=1;
      }
      /**
		img.dataset.src：
		dataset 属性是一个 DOMStringMap 对象，包含元素的所有 data-* 属性。
		使用 dataset 属性时，你可以直接访问不带前缀的属性名（例如，data-src 可以通过 dataset.src 直接访问）。
		这种方式更加简便和直观，而且可以利用驼峰命名规则，将 data-src 转化为 dataset.src。
		适用于访问任意 data-* 属性，不仅仅是 data-src。
	**/
      img.removeAttribute('data-src');
      observer.unobserve(img); // 停止观察该图像
    }
  });
});

// 为每个图像开始观察
lazyImages.forEach(image => {
  observer.observe(image);
});

这段代码会观察所有带有data-src属性的图像元素，一旦它们进入视窗，就会加载图像。一旦图像加载后，就会移除data-src属性，并停止观察该图像。

这就是实现图片懒加载的基本步骤。当用户滚动页面时，只有那些可见的图像才会被加载，从而减少初始页面加载时间。这对于提高网页性能和用户体验非常有帮助

Intersection Observer

Intersection Observer 是一个在Web开发中用于监测元素是否进入或离开视口（可见区域）的JavaScript API。它为开发者提供了一种有效的方法来执行懒加载、无限滚动、延迟加载等操作，而无需侦听滚动事件或手动计算元素位置。Intersection Observer API的主要特点包括：

异步和性能优化： Intersection Observer 是异步的，它在后台自动监测元素的可见性，而不会阻塞主线程，这有助于提高页面性能。

懒加载：可以使用 Intersection Observer 来懒加载图像、视频以及其他资源。当元素进入视口时，你可以执行加载操作。

无限滚动：在无限滚动的页面上，可以使用 Intersection Observer 来监测底部元素是否进入视口，从而触发加载更多内容的操作。

元素位置检测：可以轻松检测元素相对于视口的位置，如元素的进入、离开、部分进入或完全进入视口。

基本使用步骤如下：

创建一个 IntersectionObserver 实例，传入一个回调函数，该回调函数会在被观察元素进入或离开视口时被触发。
let ob = new IntersectionObserver(callback, options);

callback 会接收两个参数，主要解释如下： entries：它是一个 IntersectionObserverEntry 对象数组
IntersectionObserverEntry 主要存储的是一些观察元素的信息，主要有以下 7 个属性：
time：可见性发生变化的时间，是一个高精度时间戳，单位为毫秒 target：被观察的目标元素，是一个 DOM 节点对象
rootBounds：根元素的矩形区域的信息，getBoundingClientRect()方法的返回值，如果没有根元素（即直接相对于视口滚动），则返回
null
boundingClientRect：目标元素的矩形区域的信息
isIntersecting：目标元素当前是否可见 Boolean值可见为 true intersectionRect：目标元素与视口（或根元素）的交叉区域的信息
intersectionRatio：目标元素的可见比例，即 intersectionRect 占 boundingClientRect 的比例，完全可见时为 1，完全不可见时小于等于 0

observer：它返回的是被调用的 IntersectionObserve 实例，我们通常无需操作。

options 配置
options 是构造函数的第二个参数，是一个对象的形式，它主要一些配置信息，主要配置项有如下几个：
root：主要用来配置被观察元素是相对于谁可见和不可见，如果不配置，则默认的是浏览器视口。
threshold：主要用来配置两个元素的交叉比例，它是一个数组，用于决定在什么时候触发回调函数。
rootMargin：用来改变可视区域的范围，假如我们可视区域大小是
300x300，可以通过该参数改变可视区域大小，但是实际像素值并没有变，优点类似于我们上拉加载更多场景：当距离底部多少多少像素的时候就加载。

使用 observe() 方法开始观察一个或多个元素。一旦被观察的元素的可见性状态发生变化，回调函数就会被调用。

ob.observe([element])：使用该方法后代表我们开始观察某个元素了，它接收一个元素节点作为参数，也就是被观察元素。
ob.unobserve([element])：该方法用于停止观察某元素，同样接收一个元素节点作为参数。
ob.disconnect()：该方法用于关闭观察器。

在回调函数中处理元素的可见性变化。你可以判断元素是否进入或离开视口，以执行相应的操作。

下面是一个示例代码，演示如何使用 Intersection Observer 来监测元素的可见性：

// 创建 Intersection Observer 实例
const observer = new IntersectionObserver(entries => {
/*
+创建监听器、且监听了DOM元素会立即执行一次(连续监听多个DOM只触发一次，但是如果监听是分隔开的，每新监听一个元素都会触发执行一次)
+当监听的元素和可视窗口交叉状态改变，也会触发执行默认是"一露头”或者"完全出去”，会触发，当然可以基于第二个0ptions配置项中的threshold来指定规则;
threshold: [0] 一露头&完全出去
...
threshold: [1]完全出现&出去一点
*/
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      // 元素进入视口
      entry.target.classList.add('visible');
    } else {
      // 元素离开视口
      entry.target.classList.remove('visible');
    }
  },{threshold:[0,0.5,1]});
});

// 获取需要观察的元素
const elements = document.querySelectorAll('.observe-me');

// 开始观察这些元素
elements.forEach(element => {
  observer.observe(element);
});

在上面的示例中，我们创建了一个 IntersectionObserver 实例，观察了所有具有 observe-me 类的元素。一旦这些元素进入视口或离开视口，回调函数将被触发，然后我们根据 isIntersecting 属性来添加或删除 visible 类，以改变元素的可见性。

Intersection Observer 提供了强大的方式来处理元素的可见性，而无需频繁计算元素的位置或监听滚动事件。这有助于改善页面性能和用户体

react-lazyload

要在 React 应用中实现图片懒加载，你可以使用 react-lazyload 库，以下是使用 react-lazyload 实现图片懒加载的步骤：

安装 react-lazyload 库：首先，在你的 React 项目中，你需要安装 react-lazyload 库。你可以使用 npm 或 yarn 进行安装：
使用 npm：
npm install react-lazyload --save
或使用 yarn：
yarn add react-lazyload
导入 react-lazyload：在你的 React 组件中，导入 react-lazyload 库：
import LazyLoad from ‘react-lazyload’;
使用 LazyLoad 组件：在你的 JSX 中使用 LazyLoad 组件来包装要进行懒加载的图像。你可以将 LazyLoad 组件作为包裹你的元素的容器。

import React from 'react';
import LazyLoad from 'react-lazyload';

function MyComponent() {
  return (
    <div>
      {/* 懒加载的图像 */}
      <LazyLoad height={200} offset={100}>
        <img src="path/to/your-image.jpg" alt="Your Image" />
      </LazyLoad>

      {/* 其他内容 */}
    </div>
  );
}

在上面的示例中，组件包装了要懒加载的图像元素。你可以通过传递一些选项作为 height 和 offset 来配置懒加载的行为：

height: 表示容器的高度。当图片的容器高度在视口内时，图片开始加载。
offset: 表示容器距离视口的偏移量，当容器距离视口 offset 像素时，图片开始加载。
你可以根据需要自定义这些选项，以满足你的具体需求。

其他配置： react-lazyload 还支持其他配置选项，你可以在组件上添加，例如 once 属性，用于控制是否只加载一次，以及 placeholder 属性，用于在图片加载之前显示占位符。
这样，你就可以使用 react-lazyload 实现图片懒加载，确保在视口中的图像只在用户滚动到它们附近时才加载，提高页面性能和用户体验。