Vue 项目使用 Vue-lazyload 做图片懒加载。
下载 Vue-lazyload 的包
NPM包
npm install vue-lazyload --save
在项目 main.js中通过 import 引入
import Vue from ‘vue‘ import App from ‘@/App‘ import VueLazyload from ‘vue-lazyload‘
Vue.use( VueLazyload, { preLoad: 1.3, error: require(‘@/assets/loding@3x.png‘), loading: require(‘@/assets/loding@3x.png‘), attempt: 1 })
| 属性 | 描述 | 默认 | 选项 |
|---|---|---|---|
preLoad |
预加载高度的比例 | 1.3 |
Number |
error |
图片加载失败后 | ‘data-src‘ |
String |
loading |
图像正在加载时 | ‘data-src‘ |
String |
attempt |
尝试次数 | 3 |
Number |
listenEvents |
需要监听的事件 | [‘scroll‘, ‘wheel‘, ‘mousewheel‘, ‘resize‘, ‘animationend‘, ‘transitionend‘, ‘touchmove‘] |
所需监听的事件 |
adapter |
动态修改元素的属性 | { } |
元素适配器 |
filter |
图像的 src 过滤器 | { } |
图像 url 过滤器 |
lazyComponent |
lazyload 组件 | false |
懒加载组件 |
使用 v-lazy 指令
<div class="main"> <div class="list" v-if="list.length > 0" v-for="(item, index) of list" :key="index" @click="goInfo(index, item.url_address)"> <div class="img"> <img v-lazy="item.img_url" alt=""> </div> <p class="txt" v-text="item.title"></p> </div> <div class="noMore">已经到底啦~</div> <p class="list" v-if="list.length<=0">活动筹备中...</p> </div>
原文：https://www.cnblogs.com/evenyao/p/9902262.html