react 实现图片懒加载

懒加载是一种对网页性能优化的方式，而图片懒加载当一个网站加载图片过多时就需要懒加载的协助，从而提高页面的加载速度，减轻服务器的压力，节省流量。

懒加载是延迟加载一些资源（如：图片）的一种策略，以用户的行为和导航模式为依据，判断图片在被需要的时候才加载。通常来说，仅当这些资源滚动到视图中才被加载 。

第一步、安装组件

npm i --save react-lazy-load-image-component

第二部、直接上代码（知道也懒得看文字） 

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

export default function Imglan() {
    const imglist = [
        "https://scpic.chinaz.net/files/pic/pic9/202009/apic27858.jpg",
        "https://pic1.zhimg.com/v2-e915686432f3bb45dd43705ec445352d_r.jpg",
        "https://www.euweb.cn/wp-content/uploads/2016/12/302636-106.jpg",
        "https://scpic.chinaz.net/files/pic/pic9/202009/apic27858.jpg",
    ]
    return (
        <div style={{ width: "60%" }}>

            {imglist.map((img) => (
                <LazyLoadImage src={img}
                    width={600} height={400}
                    alt="Image Alt"
                />
            ))}

        </div>
    )
}