vue项目里使用vantUI框架使用轮播组件和懒加载出现元素跳动的问题

移动端开发过程发现：

1.懒加载我局部使用报错。只好全局引入，也方便以后其他页面的使用

main.js

// or with options (options 为可选参数，无则不传)
import { Lazyload } from 'vant';
 Vue.use(Lazyload, {
  preLoad: 1.3,
  error: 'static/img/error.jpg',
  loading: 'static/img/loading.gif',
  attempt: 3
})

轮播.vue

<template>
  <div class="home-swipe">
      <van-swipe :autoplay="3000">
          <van-swipe-item v-for="(image, index) in images" :key="index">
            <img v-lazy="image" :ref="img" width="100%"/>
            
          </van-swipe-item>
      </van-swipe>
  </div>
</template>

发现元素跳动，因为为了图片宽高自适应用了100%，但是中间过渡的加载动画loading.gif 图片宽高比不同。初始化一瞬间。gif图片将元素撑大，同时img被放大。失真。

折中方案。将gif宽高比裁剪的和轮播图片宽高比等同。或用轮播图等比宽高的图片或gif代替

有更好的方案。请告知。