vue-lazyload实现的示例分析
这篇文章给大家分享的是有关vue-lazyload实现的示例分析的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
成都创新互联于2013年开始,先为肥东等服务建站,肥东等地企业,进行企业商务咨询服务。为肥东企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。
首先 ,在命令行输入npm install vue-lazyload
&&cnpm install vue-lazyload
然后,在main.js里引入这个模块。
import 'VueLazyload' from 'vue-lazyload' Vue.use(VueLazyload,{ preload:1.3,//预加载的宽高 loading:"img的加载中的显示的图片的路径", error:"img加载失败时现实的图片的路径", attempt:3,//尝试加载的次数 listenEvents:['scroll','wheel','mousewheel','resize','animationend','transitionend','touchmove'], //你想让vue监听的事件 })
然后在app.vue的template里写一个
然后在app.vue的script里写
data(){ return { img:{ src:"图片的真是路径" } } }
捋一下思路:
//main.js // The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import App from './App' import $ from 'jquery' import 'assets/bootstrap/css/bootstrap.min.css' import 'assets/bootstrap/js/bootstrap.min' import router from '@/router/index' import VueLazyload from 'vue-lazyload' Vue.use(VueLazyload,{ preload:1.3, loading:require('../static/imgs/ad3.png'), //解释一下为什么是require('.....url'):因为vue自带webpack打包工具,如果是图片路径就会把他当成模块解析,所以直接引入就好了。 //记得把里面的路径换成自己的哦 listenEvents:['mousewheel'], }) //载入vue-router //import Vue from 'vue' /* eslint-disable no-new */ new Vue({ el: '#app', router, template: '', components: { App } }) //app.vue
感谢各位的阅读!关于“vue-lazyload实现的示例分析”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!
新闻标题:vue-lazyload实现的示例分析
链接分享:http://pwwzsj.com/article/jsjhds.html