《图片懒加载之react-lazyload》

Posted 2022-11-28 杨晓风-linda

背景

懒加载是一种对网页性能优化的方式，而图片懒加载当一个网站加载图片过多时就需要懒加载的协助，从而提高页面的加载速度，减轻服务器的压力，节省流量。

那么在react框架下，PC端的电商项目如何对商品feed流的图片做懒加载处理呢？下面跟随小编一起来看看……

技术方案

站在巨人的肩膀上

通过百度等搜索引擎，react框架下有npm包专门针对图片懒加载：react-lazyload

查看相关用法

1、npm网站：react-lazyload - npm

2、props

属性	数据类型	默认值	备注
children	Node	undefined
scrollContainer	String/DOM node	undefined	滚动区域
height	Number/String	undefined	单个图片视图高度
once	Bool	false
offset	Number/Array(Number)	0	距离多少进行预加载
scroll	Bool	true	是否监听滚动
resize	Bool	false
overflow	Bool	false
placeholder	Any	undefined
unmountIfInvisible	Bool	false
debounce/throttle	Bool / Number	undefined
classNamePrefix	String	lazyload
style	Object	undefined
wheel		DEPRECATED	已废弃

3、具体实践

        <LazyLoad
          resize
          scrollContainer=document.getElementById('body') as htmlDivElement
          overflow=true
          key=cardItem
          placeholder=<img width="100%" height="100%" src=lazyLoadImg alt="logo"/>
        >
          <img className=`$style.image $cardItem.stocks <= 0 && style.goodsNoStockStyle` src=cardItem.view?.thumPic alt="" style=...imgSizeStyle />
        </LazyLoad>

思考

一个问题的解决，我们大概有三种路可以走，首先，根据自己的经验，去想到解决方案；其次，站在巨人的肩膀上；最后去创造。

但问题的解决方案都是不断优化的，所以如果遇到问题，我们往往可以通过经验解决问题的话，不否认我们经历比较多，历练比较多，从这个角度来说，实力也不错。但我们要用成长型思维对待万物，需要去通过强大的搜索引擎，去搜索更多的解决思路，拓展眼界，增添思考角度。

然而我们解决角度能深入到底层原理的话，会让我们从根本上思考，甚至于在这种力度上，我们可以去进行创造。虽然不能创造，也能在这种现有的解决方案的源码和实现原理上拓展我们的思维。如果之前一致纠结于不知该如何去看源码，不妨从问题着手，这样让自己有着重点去看和思考时，发现看源码也就没有那么心理障碍和难以接受了~

参考

1、react-lazyload 实现图片懒加载 - 每天都要进步一点点 - 博客园

2、https://www.jb51.net/article/220662.htm

3、react-lazyload懒加载控件源码解析_helloxielan的博客-CSDN博客