nuxt 使用vue-lazyload
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了nuxt 使用vue-lazyload相关的知识,希望对你有一定的参考价值。
参考技术A 1.安装2.在plugins下新建vue-lazyload.js
图片在assets目录下用require引入,在static下可以用相对路径引入
3.在nuxt.config.js的plugins下面引入
4.使用:图片的src换成v-lazy,注意:一定要绑定key,不然翻页的时候可能图片不会变
vue-lazyload 的使用
github地址:https://github.com/hilongjw/vue-lazyload
npm i vue-lazyload -S
或者
<script src="https://unpkg.com/vue-lazyload/vue-lazyload.js"></script>
<script>
Vue.use(VueLazyload)
...
</script>
用法:(更多选项见github文档)
import Vue from 'vue'
import App from './App.vue'
import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload)
// or with options
Vue.use(VueLazyload, {
preLoad: 1.3,
error: 'dist/error.png',
loading: 'dist/loading.gif',
attempt: 1
})
new Vue({
el: 'body',
components: {
App
}
})
图片懒加载:
<ul>
<li v-for="img in list">
<img v-lazy="img.src" >
</li>
</ul>
<div v-lazy-container="{ selector: 'img' }">
<img data-src="//domain.com/img1.jpg">
<img data-src="//domain.com/img2.jpg">
<img data-src="//domain.com/img3.jpg">
</div>
<div v-lazy-container="{ selector: 'img', error: 'xxx.jpg', loading: 'xxx.jpg' }">
<img data-src="//domain.com/img1.jpg">
<img data-src="//domain.com/img2.jpg">
<img data-src="//domain.com/img3.jpg">
</div>
<div v-lazy-container="{ selector: 'img' }">
<img data-src="//domain.com/img1.jpg" data-error="xxx.jpg">
<img data-src="//domain.com/img2.jpg" data-loading="xxx.jpg">
<img data-src="//domain.com/img3.jpg">
</div>
以上是关于nuxt 使用vue-lazyload的主要内容,如果未能解决你的问题,请参考以下文章
如何以与@nuxt/apollo subscribeToMore 一起使用的方式设置我的 nuxt
使用 Jest 在 Nuxt 中测试组件时如何添加/模拟 Nuxt Auth 库