【JS】如何做到动态加载购物车的商品图片

Question

如何做到动态加载购物车的商品图片，比如一次只加载6个，或者根据当前购物车的可显示范围，只显示加载当前可视范围内的所看到的商品的图片，滚轮滑动显示下面的商品时，图片才加载。

Answer 1

1、原生属性：
https://developer.mozilla.org...
缺点就是兼容性还不好；
2、自己手写一个，比如：
a)注册一个滚动事件，实时计算图片是否在可视区
b)IntersectionObserver监听图片
3、用插件——省事

已参与了 SegmentFault 思否社区 10 周年「问答」打卡 ，欢迎正在阅读的你也加入。

Answer 2

看你问题的标签里面带有vue，就认为你是使用vue框架了。
那么我推荐你使用vue-lazyload。

Answer 3

现在很多ui组件库不都支持懒加载

Answer 4

可以通过IntersectionObserver用来监听元素是否进入了设备的可视区域之内