react 判断图片是否加载完成_react 图片懒加载

一、react中useEffect监听事件需要在组件卸载前清除

useEffect(() => {

// throttl 是js节流函数，具体请参考lodash.js工具库

window.addEventListener('scroll', throttle(checkAllImags));

return () => {

window.removeEventListener('scroll', throttle(checkAllImags));

}

}, []);

二、判断元素是否进入视图

const isInClietn = (el) => {

// 获取元素

let eldom = document.querySelector(el);

// 获取元素具体视窗的距离

let { top, right, bottom, left } = eldom.getBoundingClientRect();

// 浏览器窗口

let clientHeight = window.innerHeight;

let clientWidth = window.innerWidth;

return !(top > clientHeight || bottom < 0 || left > clientWidth || right < 0);

};

三、滚动实时监听处理图片src

const checkAllImags = () => {

var imgs = document.querySelectorAll('img');

let index = 0;

Array.from(imgs).map((item, inx) => {

if (isInClietn(item) && inx > index) {

let eldom = document.querySelector(item);

eldom.src = eldom.getAttribute('data-src');

index = inx + 1;

}

});

};

四、图片组件设置，data-src是自定义属性

data-src="" // 真实的地址

src="../../src/default.jpg" // 懒加载之前展示的图

/>;