vue-awesome-swiper+图片懒加载+loop=空白

最近项目中基于vue-awesome-swiper再次封装，遇到使用循环滚动总是出现空白页问题。

具体使用

我在封装的时候，为了提高响应速度，使用了图片的懒加载，再加上设置循环滚动的时候，即loop=true，发现每次在要切换的时候,就会出现一个空白的图片页，苦思冥想很长时间，终于找到问题根源。

问题原因

我们都知道左右滚动循环的动画原理就是：

在第一张前面加上最后一张的图片，在最后一张的后面加上第一张图片，在切换后，再把图片位置换成应该出现的那个图片位置，因为图片一样，所以肉眼无法识别，这样就实现了左右循环切换。

由以上原理，再加上图片懒加载，图片懒加载，就是没加载，也就是说，没图片，空白页，所以自动填充到后面和前面的图片为空，即空白页。

解决方法

对图片的最后一张和第一张不使用懒加载就可以了。

 <swiper :options="Setting" v-if="list.length>0">
      <swiper-slide v-for="(item,index) in list" :key="item.id">
        <img :src="item.image.url" v-if="index==0||index==(list.length-1)" />
        <img v-lazy="item.image.url" v-else />
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>

问题解决，比原来也就多加载了一张图片