目的:当网络请求比较慢的时候,图片文件比较多,让用户体验更好一点。
npm 安装 vue-lazyload组件
$ npm i vue-lazyload -D
js:
import Vue from 'vue';
import VueLazyload from 'vue-lazyload';
import { Toast } from "vant";
Vue.use(VueLazyload)
html:
<div class="periodsImg">
<img v-lazy="item.action.image_url_origin" :key="item.action.image_url_origin">
</div>
遇到的bug:动态切换data里的数据,但是img的图片不会变
解决办法:加上:key
<img v-lazy="item.action.image_url_origin" :key="item.action.image_url_origin">