react 图片懒加载组件

最新推荐文章于 2024-09-19 11:41:24 发布

evail_

最新推荐文章于 2024-09-19 11:41:24 发布

阅读量941

点赞数

分类专栏： web 文章标签： react

本文链接：https://blog.csdn.net/evail_/article/details/109210813

版权

web 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

react 图片懒加载组件

	这里我用了一个新的API来判断元素是否可见IntersectionObserver，
	具体教程参考IntersectionObserver
	(http://www.ruanyifeng.com/blog/2016/11/intersectionobserver_api.html)

import React ,{useEffect,useRef} from 'react'
var io = new IntersectionObserver(
    entries => { 
      entries.forEach(item => {
          if(item.intersectionRatio && item.target.src !==item.target.getAttribute('_src')){
              item.target.src = item.target.getAttribute('_src');   
          }
      })
    }
  );
export default function LazyImg(props) {
   const ref = useRef(null)
   useEffect(() => {
    io.observe(ref.current)
    return () => {
        io.unobserve(ref.current);
    }
   }, [])
        return <img ref={ref} _src={props.src}></img>      
}