React中如何实现图片懒加载

本文章是将图片懒加载封装成一个全局组件然后根据ref进行操作最后实现懒加载效果目的达成更加好看的加载效果使自己的页面看上去更加美观

1. 首先在page或者你们代码存放的地方创建一个新的文件目录我创建的名字是LazyImg
2. 然后在里面创建一个jsx文件就是封装组件那个样子
3. 在里面输入rcfe回车创建就成了下面那个样子名字自己起

import React from 'react'

function LazyImg() {
  return (
    <div>LazyImg</div>
  )
}

export default LazyImg

4.定义一个bool值一会要用

 import React from 'react'

function LazyImg() {
    const [show,setShow]= React.useState(false)
      return (
        <div>LazyImg</div>
      )
}

export default LazyImg

5.因为他是子组件所以要将父组件传过来的图片链接接收到

 import React from 'react'

function LazyImg() {
    const [show,setShow]= React.useState(false)
    const {scr}=props
      return (
        <div>LazyImg</div>
      )
}

export default LazyImg

6.将取到的值进行渲染上去要用自己定义的bool值show做一个判断判断是否将图片传过来了

import React from 'react'

function LazyImg() {
    const [show,setShow]= React.useState(false)
    const {scr}=props
      return (
        <img src={show?scr:'自己的懒图片'} alt="" />
      )
}

export default LazyImg

7.然后用ref进行绑定,并且在每次调用这个组件都会触发的条件React.useEffect

import React from 'react'

function LazyImg() {
    const [show,setShow]= React.useState(false)
    const {scr}=props
    const ref=React.useRef()//绑定ref值
    
    React.useEffect(() => {},[])//useEffect每次进入此页面触发
    
      return (
        <img ref={ref} src={show?scr:'自己的懒图片'} alt="" />
      )
}

export default LazyImg

8.然后使用new IntersectionObserver监听此页面元素

import React from 'react'

function LazyImg() {
    const [show,setShow]= React.useState(false)
    const {scr}=props
    const ref=React.useRef()//绑定ref值
    
    React.useEffect(() => {//useEffect每次进入此页面触发
        let io=new IntersectionObserver((list) => {})
    },[])
    
      return (
        <img ref={ref} src={show?scr:'自己的懒图片'} alt="" />
      )
}

export default LazyImg

9.在里面判断是否list[0].intersectionRatio是否大于0,就是在页面中是否被看见没看见小于等于0,被看见了就大于0

import React from 'react'

function LazyImg() {
    const [show,setShow]= React.useState(false)
    const {scr}=props
    const ref=React.useRef()//绑定ref值
    
    React.useEffect(() => {//useEffect每次进入此页面触发
        let io=new IntersectionObserver((list) => {
        if(list[0].intersectionRatio>0){
                setTimeout(()=>{
                    setShow(true)
                },1000)
            }
        })
    },[])
    
      return (
        <img ref={ref} src={show?scr:'自己的懒图片'} alt="" />
      )
}

export default LazyImg

10.最后使用io.observe进行最后的操作

import React from 'react'

function LazyImg() {
    const [show,setShow]= React.useState(false)
    const {scr}=props
    const ref=React.useRef()//绑定ref值
    
    React.useEffect(() => {//useEffect每次进入此页面触发
        let io=new IntersectionObserver((list) => {
        if(list[0].intersectionRatio>0){
                setTimeout(()=>{
                    setShow(true)
                },1000)
            }
        })
        io.observe(ref.current)
    },[])
    
      return (
        <img ref={ref} src={show?scr:'自己的懒图片'} alt="" />
      )
}

export default LazyImg

11.在父级调用

import Lazyimg from '找到懒加载页面'
//在你使用的地方使用
<Lazyimg src={图片} />

解释不够详细请多多理解感谢各位大佬观看