React实现懒加载组件

dongIsRunning

于 2024-04-26 15:46:16 发布

阅读量139

点赞数 2

文章标签： react.js 前端前端框架

本文链接：https://blog.csdn.net/weixin_73077230/article/details/138221067

版权

一、首先我是结合IntersectionObserver进行实现的，url:https://developer.mozilla.org/zh-CN/docs/Web/API/IntersectionObserver/IntersectionObserverx

先去结合MND文档可以尝试写一个demo，话不多说，下面是react的代码！

react:

这是图片示例

const Urls: string[]=[
"https://img95.699pic.com/photo/50070/5999.jpg_wh860.jpg",
"https://pic3.zhimg.com/v2-d1f733345b0d11ea4d1bde0e2511dbc8_720w.jpg?source=172ae18b",
"https://ts1.cn.mm.bing.net/th/id/R-C.b2deabf4f73362fdeded6ebb1759e6d5?rik=QTdjsA3RyD4v4g&riu=http%3a%2f%2fn.sinaimg.cn%2fsinacn20107%2f549%2fw600h749%2f20190427%2f07db-hvvuiyp2168388.jpg&ehk=ea6ytlOusTMhUxs4TgDNYQqymM8voeFn9db9ZiNcMOk%3d&risl=&pid=ImgRaw&r=0"
];

组件示例

const ImageLazy = () => {
    const observer: React.MutableRefObject<any> = useRef();
    useEffect(() => {
        observer.current = new IntersectionObserver(entries => {
            entries.forEach((item: any) => {
                if (item.intersectionRatio > 0) {
                    myLazy(item.target)
                }
            })
        }, {
            root: document.querySelector('#lazyImgDeom')
        })
        handleImgShow();
        return () => {
            observer.current.disconnect();
        };
    }, [])
 
    const myLazy = (dom:HTMLImageElement) => {
        if (!dom.src || dom.src !== dom.dataset.src) {
            dom.src = dom.dataset.src as string;
        }
        dom.onload = () => {
            dom.style.backgroundColor = '';
            dom.style.aspectRatio = '';
        }
    }
 
    const handleImgShow = useCallback(() => {
        const list = [...(document.getElementById("imgList") as HTMLElement).getElementsByTagName("img")];
        list.forEach(img => observer.current.observe(img))
    }, [])
 
    return <div className={styles.lazyImgDeom} id="lazyImgDeom">
        <div className={styles.imgList} id="imgList">
            {
                Urls.map(url => <img className={styles.imgItem} data-src={url} key={url} />)
            }
        </div>
    </div>
}
 
export default ImageLazy