使用Intersection Observer接口实现图片懒加载

白菜汤里的胡萝卜

已于 2023-02-11 18:14:01 修改

阅读量404

点赞数

文章标签： javascript 前端 reactjs

于 2022-09-28 22:35:33 首次发布

本文链接： https://blog.csdn.net/weixin_43304758/article/details/127097983

版权

接上上一篇使用Intersection Observer接口实现分页加载，再用这个接口实现图片懒加载

为img添加自定义属性data-src存储真实的图片地址，等到下拉达到可视区域位置，即isIntersecting为true时就将真实地址赋给src，没有到达则图片地址为默认图片

未达到可视区域，src为默认图片

达到可视区域后，src为真实图片地址

自定义HOOK—useImgHook.js

import { useEffect } from 'react'

/**
 * 1，监听图片是否进入可视区域；
 * 2，将src属性的值替换为真实的图片地址 --- data-src
 * 3，停止监听当前的节点
 * @param {*} ele 
 * @param {*} callback 
 * @param {*} watch 
 */
let observer;
export default function useImgHook(ele, callback, watch) {
    useEffect(() => {
    	//目标元素
        const nodes = document.querySelectorAll(ele)
        if (nodes && nodes.length) {
            observer = new IntersectionObserver((entries) => {
                callback && callback(entries)
                entries.forEach(item => {
                    // console.log(item);
                    if (item.isIntersecting) {
                        const data_src = item.target.getAttribute('data-src')
                        //赋值
                        item.target.setAttribute('src', data_src)
                        //停止监听目标元素
                        observer.unobserve(item.target)
                    }
                })
            })
            nodes.forEach(item => {
                observer.observe(item)

            })

            return () => {
                // 停止监听
                if (nodes && nodes.length && observer) {
                    observer.disconnect()
                }
            }
        }
    }, watch)
}

使用useImgHook

import { useImgHook } from "@/hook/index.js";
...
// 图片懒加载
useImgHook('.item-img', (entries) => { }, null)
...
{houseList.map((item) => (
    <div className='item' key={item.id} >
    	...
        <img alt='img' className='item-img' data-src={item.img} src={require('../../assets/img/blank.png')} />
        ...
    </div>
))}