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
>
}
