直播带货app源码，前端商城图片资源优化实现的相关代码
实现简单的懒加载
那么，懒加载怎么实现呢？实现的方式有两种。
通过scroll事件来监听视窗滚动区域实现。该方法兼容性好，绝大多数浏览器和WebView都兼容支持。
通过IntersectionObserver API观察DOM是否出现在视窗内，该方法优点在于调用简单，只是部分移动端兼容没有上一种方式好。
两种形式都是在观察当前DOM是否出现在了可视窗口内，如果出现的话就将data-src中的图片地址赋值给src，然后开始加载当前的图片。
那么，下面我们就开始着手实现一个基于scroll事件的懒加载示例吧。
页面布局
我们先画一个基本的页面布局出来，主要是将视窗和图片加载出来。
const ImageLazy = () => { const [list, setList] = useState([ 1,2,3,4,5,6,7,8 ]) const ref = useRef<HTMLDivElement | null>(null) return ( <div className="scroll-view" ref={ ref }> {list.map((id) => { return ( <div key={id} className="scroll-item"> <img style={{ width: ‘100%‘, height: ‘100%‘ }} data-src={ `${ prefix }split-${id}.jpg` } /> </div> ); })} </div> ) } .scroll-item { height: 200px; } .scroll-view { height: 400px; overflow: auto; }
注册scroll事件
为scroll-view绑定了ref之后，同时需要在useEffect中对scroll事件进行绑定和注销。
如下，我先获取当前组件所有的img元素(真实操作最好使用指定className)，为ref.current进行addEventListener添加事件监听操作，然后在回调中执行对应的方法。
同时，在return的时候，也需要将其事件移除，避免造成一些意外情况。
useEffect(() => { const imgs = document.getElementsByTagName(‘img‘); console.log(ref.current, ‘current‘) ref.current?.addEventListener(‘scroll‘, () => { console.log(‘listens run‘) }) return ( ref.current?.removeEventListener(‘scroll‘, () => { console.log(‘listens end‘) }) ) }, [])
以上就是直播带货app源码，前端商城图片资源优化实现的相关代码， 更多内容欢迎关注之后的文章