Vue vue-lazyload懒加载

373 阅读1分钟

1.下载依赖

npm install vue-lazyload -D

2.在main.js中配置(当然也可以在组件中配置)

// import Vue from "vue";
 
import VueLazyload from "vue-lazyload";
Vue.use(VueLazyload, {
  loading: require("../../assets/images/default.gif"), //加载中显示的图片
  attempt: 3,
  preload:700 //预加载高度
});

3.把图片img里面路径 :src改为v-lazy 就可以了

<img
              v-lazy="`http://www.ibugthree.com/${item.img_src}`"
              alt=""
              class="automobile-content-list-img"
            />