vue懒加载插件

最新推荐文章于 2024-07-10 00:30:00 发布

马优晨

最新推荐文章于 2024-07-10 00:30:00 发布

阅读量1.7k

点赞数 1

分类专栏： vue 文章标签： vue懒加载插件 vue懒加载 vue懒加载组件 vue lazyload vueLazyload

本文链接：https://blog.csdn.net/qq_24147051/article/details/90206455

版权

vue 专栏收录该内容

90 篇文章 14 订阅

订阅专栏

在这里插入图片描述

（1）安装：

npm i vue-lazyload -S

（2）代码：


<template>
  <div class="Lazy">
    <ul>
      <li v-for="(item,index) in todoList"
          :key="index">
        <img class="item-pic"
             v-lazy="item.src" />
      </li>
    </ul>
  </div>
</template>
<script>
import Vue from 'vue'
import VueLazyload from 'vue-lazyload'

Vue.use(VueLazyload, {
  preLoad: 1.3,
  error: 'http://img3.imgtn.bdimg.com/it/u=3133706957,941174044&fm=26&gp=0.jpg',
  loading: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1557825530563&di=6c1a1404f46c3fe9ff799473c57dab7f&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F038ac3055e6a32c6ac7251df85689e4.jpg',
  attempt: 1,
  listenEvents: ['scroll']
})
export default {
  name: 'Lazy',
  data () {
    return {
      todoList: [
        {
          src: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1557825771356&di=54b62c05fcf515eb7397d591b70a2565&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fzhidao%2Fpic%2Fitem%2Fb7fd5266d0160924512075c8d60735fae7cd34d8.jpg'
        }, {
          src: 'http://img3.imgtn.bdimg.com/it/u=3133706957,941174044&fm=26&gp=0.jpg'
        }, {
          src: 'http://img3.imgtn.bdimg.com/it/u=3060052099,2668455390&fm=26&gp=0.jpg'
        }, {
          src: 'http://img5.imgtn.bdimg.com/it/u=2016363011,101787864&fm=26&gp=0.jpg'
        }, {
          src: 'http://img0.imgtn.bdimg.com/it/u=1936286817,598539981&fm=26&gp=0.jpg'
        }, {
          src: 'http://img0.imgtn.bdimg.com/it/u=1711083898,1110899366&fm=26&gp=0.jpg'
        }, {
          src: 'http://img0.imgtn.bdimg.com/it/u=2047572761,3993497429&fm=26&gp=0.jpg'
        }, {
          src: 'http://img1.imgtn.bdimg.com/it/u=2013365486,2678974389&fm=26&gp=0.jpg'
        }, {
          src: 'http://img3.imgtn.bdimg.com/it/u=3133706957,941174044&fm=26&gp=0.jpg'
        }, {
          src: 'http://img3.imgtn.bdimg.com/it/u=3060052099,2668455390&fm=26&gp=0.jpg'
        }, {
          src: 'http://img5.imgtn.bdimg.com/it/u=2016363011,101787864&fm=26&gp=0.jpg'
        }, {
          src: 'http://img0.imgtn.bdimg.com/it/u=1936286817,598539981&fm=26&gp=0.jpg'
        }, {
          src: 'http://img0.imgtn.bdimg.com/it/u=1711083898,1110899366&fm=26&gp=0.jpg'
        }, {
          src: 'http://img0.imgtn.bdimg.com/it/u=2047572761,3993497429&fm=26&gp=0.jpg'
        }
      ]
    }
  }
}
</script>
<style lang="less">
.Lazy {
  background-color: #eee;
  .item-pic {
    width: 100%;
  }
}
</style>