欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

图片懒加载 在可视区域才加载

程序员文章站 2022-04-18 13:57:10
...
npm install vue-lazyload --save-dev //安装懒加载包

入口文件main中引入

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

可配置自定义属性
Vue.use(VueLazyload, {preLoad: 1.3,error: 'dist/error.png',loading: 'dist/loading.gif',attempt: 1})

在 vue 文件中将 img 标签的 src 属性直接改为 v-lazy ,从而将图片显示方式更改为懒加载显示:
<img v-lazy="/static/img/1.png">

 

相关标签: vue