怎么实现图片懒加载？

图片懒加载是一种优化网站性能和用户体验的方法，它只在用户浏览到图片时才加载图片，而不是在页面加载时一次性加载所有图片。
所以，我们需要懒加载，进入页面的时候，只请求可视区域的图片资源,以减少页面的加载时间和带宽消耗。

使用原生JavaScript

下面是一个手写的图片懒加载案例，它使用原生JavaScript实现。
具体步骤如下：

1. 获取所有需要懒加载的图片元素

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

2. 监听滚动事件

    window.addEventListener('scroll', debounce(checkImages));

3. 判断图片是否在视口内

    function checkImages() {
      images.forEach(image => {
        if (isInViewPort(image)) {
          loadImage(image);
        }
      });
    }

    function isInViewPort(image) {
      const rect = image.getBoundingClientRect();
      return (
        rect.top >= 0 &&
        rect.left >= 0 &&
        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
        rect.right <= (window.innerWidth || document.documentElement.clientWidth)
      );
    }

4. 加载图片

    function loadImage(image) {
      image.src = image.dataset.src;
      image.removeAttribute('data-src');
    }

需要注意的是，使用原生JavaScript实现图片懒加载需要注意性能问题，可以使用节流和防抖等技术来优化代码。

Vue

Vue-lazyload插件实现
Vue-lazyload是一款Vue.js插件，它可以实现图片懒加载。具体步骤如下：

1. 安装插件：在命令行中输入pnpm install vue-lazyload --save-dev来安装Vue-lazyload插件。
2. 引入并使用插件：在项目的main.js文件中引入Vue-lazyload插件并使用它。代码如下：

    import Vue from 'vue'
    import VueLazyload from 'vue-lazyload'
    Vue.use(VueLazyload)

3. 修改图片显示方式为懒加载：将<img>标签的src属性直接改为v-lazy属性。例如：

    <img v-lazy="image.jpg">

react-lazy-load-image-component

react-lazy-load-image-component是一个适用于React的组件库，它可以实现图片懒加载。使用react-lazy-load-image-component需要以下步骤：

1. 安装组件

    pnpm install --save react-lazy-load-image-component

2. 引用组件

    import { LazyLoadImage } from "react-lazy-load-image-component";

3. 声明图片

    <LazyLoadImage
      src={Image}
      width={600}
      height={400}
      alt="Image Alt"
    />