vue-lazyload实现图片懒加载

安装依赖

npm i vue-lazyload -S
// 或者
yarn add vue-lazyload

main.js引入

import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload)

// or with options
const loadimage = require('./assets/loading.gif') //loading图
const errorimage = require('./assets/error.gif') // error图

Vue.use(VueLazyload, {
  preLoad: 1.3,
  error: errorimage,
  loading: loadimage,
  attempt: 1
})

使用

<template>
  <!--
    https://github.com/hilongjw/vue-lazyload
    npm i vue-lazyload -S
    main.js引入
    使用
  -->
  <div>
    <ul>
      <li v-for="(img, index) in list" :key="index">
        <img v-lazy="img.url" />
      </li>
    </ul>
  </div>
</template>

<script>
import img1 from "../assets/img/1.png";
import img2 from "../assets/img/2.png";
import img3 from "../assets/img/3.jpg";
import img4 from "../assets/img/4.jpg";
import img5 from "../assets/img/5.jpg";
import img6 from "../assets/img/6.jpg";
import img7 from "../assets/img/7.jpg";
import img8 from "../assets/img/8.jpg";
import img9 from "../assets/img/9.jpg";
import img10 from "../assets/img/10.jpg";
import img11 from "../assets/img/11.jpg";
import img12 from "../assets/img/12.jpg";
import img13 from "../assets/img/13.jpg";

export default {
  data() {
    return {
      list: [
        { url: img1 },
        { url: img2 },
        { url: img3 },
        { url: img4 },
        { url: img5 },
        { url: img6 },
        { url: img7 },
        { url: img8 },
        { url: img9 },
        { url: img10 },
        { url: img11 },
        { url: img12 },
        { url: img13 }
      ]
    };
  }
};
</script>

<style lang="less" scoped>
img {
  width: 100%;
}
img[lazy="loading"] {
  display: block;
  width: 200px;
  height: 200px;
  margin: 0 auto;
}
</style>

更多方法点击这里查看 github地址