图片懒加载的实现

玛已

于 2023-04-18 14:49:54 发布

阅读量119

点赞数

分类专栏： React 前端文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/qq_41028148/article/details/129562123

版权

前端同时被 2 个专栏收录

22 篇文章 1 订阅

订阅专栏

React

3 篇文章 0 订阅

订阅专栏

该代码示例展示了如何在React中利用IntersectionObserverAPI来实现图片的懒加载。图片的URL起初存储在data-src属性上，当图片进入视口时，通过观察器触发回调，将data-src的值赋给src属性，从而只加载可视区域内的图片，提高页面性能。

摘要由CSDN通过智能技术生成

原理

加载视图范围内的图片，即一开始不给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;