直播带货app源码，前端商城图片资源优化

直播带货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源码，前端商城图片资源优化实现的相关代码， 更多内容欢迎关注之后的文章