图片懒加载的实现

原理

加载视图范围内的图片，即一开始不给img标签的src给定图片url，而是绑定在data-src上，通过IntersectionObserver监听元素，当元素在可视范围内，获取之前绑定的dataset.src值手动赋值给src。

代码

import './index.scss'
import {useEffect} from "react";

const LazyImg = () =>{
        useEffect(() =>{
            const imgList = [...document.querySelectorAll('img')];
            let io = new IntersectionObserver((entries) =>{
                entries.forEach(item =>{
                    if(item.isIntersecting) { //元素可见性
                        item.target.src=item.target.dataset.src; //将src给到图片标签
                        io.unobserve(item.target);
                    }
                })
            }, {
                root: document.querySelector('.root')
            })
            imgList.forEach(img => io.observe(img));
        }, [])


        return <>
            <img data-src={process.env.PUBLIC_URL + 'img/my/wu1.jpg'}/>
            <img data-src={process.env.PUBLIC_URL + 'img/my/wu2.jpg'}/>
            <img data-src={process.env.PUBLIC_URL + 'img/my/wu3.jpg'}/>
            <img data-src={process.env.PUBLIC_URL + 'img/my/wu4.jpg'}/>
            <img data-src={process.env.PUBLIC_URL + 'img/my/ao1.jpg'}/>
            <img data-src={process.env.PUBLIC_URL + 'img/my/ao2.jpg'}/>
            <img data-src={process.env.PUBLIC_URL + 'img/my/ao3.jpg'}/>
            <img data-src={process.env.PUBLIC_URL + 'img/my/ao1.jpg'}/>
            <img data-src={process.env.PUBLIC_URL + 'img/my/wu1.jpg'}/>
            <img data-src={process.env.PUBLIC_URL + 'img/my/wu2.jpg'}/>
        </>
}

export default LazyImg;