vue.js怎么使用图片懒加载？
图片懒加载使用vue的插件vue-lazyload
github地址：https://github.com/hilongjw/vue-lazyload
1、安装插件
npm install vue-lazyload --save
使用cdn
<script src="https://unpkg.com/vue-lazyload/vue-lazyload.js"></script>
2、引用文件，一般在main.js全局引用，且配置好图片
// main.js入口文件
import Vue from 'vue'
import App from './App.vue'
import VueLazyload from 'vue-lazyload'
// 使用VueLazyload并传入相应的配置
Vue.use(VueLazyload, {
error: 'dist/error.webp',
loading: 'dist/loading.webp',// 懒加载使用的图片
})
new Vue({
el: '#app',
components: { App },
template: '<App/>'
})3、在需要使用懒加载的图片标签中添加v-lazy指令，值为图片本身的url地址(相当于用v-lazy替换src)
例如一张图片
<img src="https://timgsa.baidu.com/timg"></img>
写成
<img v-lazy="https://timgsa.baidu.com/timg"></img>
4、浏览器模拟网速
调慢网速以查看图片懒加载的效果
按F12呼出开发人员工具
选择network conditions
选择对应的网速
更多web前端知识，请查阅 HTML中文网 ！！
以上就是vue.js怎么使用图片懒加载？的详细内容，更多请关注易知道|edz.cc其它相关文章！
