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="www.xxx.com" // 真实的地址

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

/>;

react 判断图片是否加载完成_react 图片懒加载相关推荐

图片懒加载和Vue路由懒加载
图片懒加载什么是懒加载? 懒加载也叫做延迟加载或者按需加载 .在长网页中延迟加载暂时未看到的图片数据,能够优化网页性能,提高用户体验 .在较长的网页或应用中,如果图片很多,等待全部图片都被加载出来需 ...
懒加载和预加载的区别_类的动态创建（ro,rw）amp; 懒加载类和非懒加载类底层加载的区别 amp; 类和分类的搭配分析...
黑客技术点击右侧关注,了解黑客的世界! Java开发进阶点击右侧关注,掌握进阶之路! Python开发点击右侧关注,探讨技术话题!作者丨OSMin链接:https://juejin.im/post/5 ...
mysql 懒加载数据_jpa如何懒加载大字段，懒加载之后又如何获取懒加载字段
前言:对于大字段,我们在查询列表的时候不需要查询,但是修改的时候有需要展示大字段内容,怎么办问1.jpa如何懒加载大字段?即查询列表的时候不查询出来问2.懒加载之后又如何获取懒加载字段.比如,在后 ...
图片懒加载， Vue-Lazyload实现懒加载
1.图片懒加载 1.1.什么是图片懒加载图片懒加载图片的懒加载就是在页面打开的时候,不要一次性全部显示页面所有的图片,而是只显示当前视口内的图片,一般在移动端使用(PC端主要是前端分页或者后端分页 ...
selenium截图模糊_Selenium截屏图片未加载的问题解决--【懒加载】
需求: 截屏后转PDF. 问题: selenium截屏后,图片未加载如下图: 原因: 网站使用了懒加载技术:只有在浏览器中纵向滚动条滚动到指定的位置时,页面的元素才会被动态加载. 什么是图片懒加载? ...
react 动态路嵌套动子路由_react 路由动态加载组件，实现按需加载
默认情况下,当在项目根路径下执行npm run build时,create-react- app内部使用webpack将src/路径下的所有代码打包成一个JS文件和一个 CSS文件. 当项目代码量不多 ...
jQuery实现简单实用的H5(手机端)下拉分页加载（所谓的懒加载！！！）
话不多说,直接码上 . <div> <div>展示内容列表块</div> //now当前页数 num总页数这些需要在列表初始化的时候计算好,并赋值给此属性 ...
react 判断图片是否加载完成_React中型项目的优化实践
项目介绍整个项目大概有60+个页面,用到的组件大概150+,package里面的依赖大概有70+个,应该勉强算得上是一个中型的React的项目了. 下面给大家看看我们现在build一次项目的结果-- ...
react.lazy 路由懒加载_React lazy/Suspense使用及源码解析
React v16.6.0已经发布快一年了,为保障项目迭代发布,没有及时更新react版本,最近由于开启了新项目,于是使用新的react版本进行了项目开发.项目工程如何搭建,如何满足兼容性要求,如何规 ...

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

react 判断图片是否加载完成_react 图片懒加载相关推荐

最新文章

热门文章