Vue中lazyload图片懒加载得示例分析
短信预约 -IT技能 免费直播动态提醒
这篇文章主要介绍Vue中lazyload图片懒加载得示例分析,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
1.安装
cnpm i vue-lazyload -S或npm i vue-lazyload -S
2.实例
导入配置等操作 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图片懒加载得示例分析”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注编程网行业资讯频道!
免责声明:
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341