npm
$ npm i vue-lazyload -S
yarn
$ yarn add vue-lazyload
在plugins
文件夹新建vue-lazyload.js
文件
import Vue from 'vue'
import VueLazyLoad from 'vue-lazyload'
const loadimage = require('../static/i.gif')
const errorimage = require('../static/i.gif')
Vue.use(VueLazyLoad, {
preLoad: 1.33, //预加载高度比例
error: errorimage, //加载失败时图像的src
loading: loadimage, //加载时图像的src
attempt: 2,
throttleWait: 500
})
nuxt.config.js
文件引入
plugins: [{
src: '@/plugins/vue-lazyload',
ssr: false
}],
在vue文件中使用
将图片的
:src
变为v-lazy
相关链接 https://github.com/hilongjw/vue-lazyload.
欢迎大神指点 :)!