Vuelazyload图片懒加载实例详解
短信预约 -IT技能 免费直播动态提醒
文档：https://github.com/hilongjw/vue-lazyload
1.安装
cnpm i vue-lazyload -S
或
npm i vue-lazyload -S2.实例
导入配置等操作 class="lazy" data-src/main.js
import Vue from 'vue'
import App from './App'
import router from './router'
//【1】导入懒加载
import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload)//【1】懒加载使用（和下面一句2选1）
//【1】懒加载使用，且入全局配置，在使用处就不用配置错误图片等（2选1）
// Vue.use(VueLazyload, {
// preLoad: 1.3, //加载时间
// error: 'dist/error.png', //图片错误显示此图
// loading: 'dist/loading.gif', //加载过程显示此图
// attempt: 1 //默认加载张数
// })
Vue.config.productionTip = false
new Vue({
el: '#app',
router,
template: '<App/>',
components: {
App
}
})使用懒加载class="lazy" data-src/components/lazy.vue
【1】定义图片错误显示等（引入图片，如果是在js中。必须require进来）
【2】使用懒加载写法 v-lazy='xxx'
<template>
<div>
<!--【2】使用懒加载写法 v-lazy='xxx'-->
<img v-lazy="imgUrl"/>
<img v-lazy="imgObj" />
</div>
</template>
<script>
export default{
name:"lazy",
data(){
return{
// 【1】定义图片错误显示等（引入图片，如果是在js中。必须require进来）
imgObj: {
preLoad: 1.3, //加载时间
class="lazy" data-src: "http://www.wwtliu.com/sxtstu/blueberrypai/indexImg/banner1.jpg",//真正图片
error: require("../assets/error.jpg"),//如果错误显示此图
loading: require("../assets/loadding.jpg"), //加载过程显示此图
attempt: 1, //默认加载张数
},
imgUrl:"http://www.wwtliu.com/sxtstu/blueberrypai/indexImg/banner2.jpg" //只加一条，即真正图
}
}
}
</script>
<style></style>效果：图片地址错误时加载到的图片。加载过程就显示加载过程图片。
到此这篇关于Vue-lazyload图片懒加载的文章就介绍到这了,更多相关Vue-lazyload图片懒加载内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
