给轮播图使用懒加载后，第一张和最后一张轮播图空白的问题

Question

使用的是 swiper@^5.3.6 vue-awesome-swiper@4.1.1 的包

<!-- options：配置轮播项 -->
<swiper v-if="swiperOption.focusList.length !== 0" :options="swiperOption">
  <!-- 轮播项 -->
  <swiper-slide v-for="(item, index) in swiperOption.focusList" :key="index">
    <a href="javascript:">
      <img v-lazy="item.picUrl">
    </a>
  </swiper-slide>
  <!-- 分页器 -->
  <div slot="pagination" class="swiper-pagination"></div>
</swiper>

用过的解决方法：第一张和最后一张轮播图不用懒加载
说明：虽然这样可以解决问题，但懒加载的意义就不大了，本来就是想有个加载动画提高用户体验，有没有更好的方法

<img v-if="index == 0 || index == swiperOption.focusList.length-1" :src="item.picUrl">
<img :key="item.picUrl.src" v-lazy="item.picUrl">

Answer 1

看上去是 swiper 自己拷贝 img 导致 v-lazy 没有被成功拷贝。

而且大概率你使用了循环滚动

为了排查是否我上述的原因，你可以把前后补充的个数调大。

解决办法也很简单

1. swiper 自己提供了一个刷新方法，调用重新生成拷贝元素即可。
2. 调整 v-lazy 即可。通过 data-src 之类的操作来实现懒加载，然后全局监听触发懒加载。

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