演示
安装插件
npm install vue-lazyload --save-dev// or<script src="/vue-lazyload/vue-lazyload.js"></script>
使用
main.js引入插件
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//尝试加载次数 | 可选})
vue文件中将需要懒加载的图片绑定 v-bind:src 修改为 v-lazy
<img class="item-pic" v-lazy="newItem.picUrl"/>
案例
<template><div class="loadingImg"><img v-lazy="img"alt="" v-for="img in list" ondragstart="return false"><div class="gototop" @click="BackToTop"><a>回到<br>顶部</a></div></div></template><script>export default{data(){return{list:["/static/img/2.jpg","/static/img/3.jpg","/static/img/4.jpg","/static/img/5.jpg","/static/img/6.jpg","/static/img/7.jpg","/static/img/8.jpg","/static/img/9.jpg","/static/img/10.jpg","/static/img/11.jpg"]}},methods:{BackToTop(){$('html,body').animate({ scrollTop: 0 }, 700); },handleScroll () {var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTopconsole.log(scrollTop)if(scrollTop >100){$(".gototop").fadeIn(500);}},},mounted(){window.addEventListener('scroll', this.handleScroll)$(".gototop").hide();},created(){}}</script><style scoped>img[lazy=loading]{}img[lazy=loaded]{animation:fade 0.5s;}img{transition:all 0.5s;display: block;width: 400px;margin: 0 auto;}@keyframes fade {0%{opacity: 0;}100%{opacity: 1;}}.gototop{width: 40px;height: 40px;border-radius: 5px;border: 1px solid #ccc;background: #f2f2f5;position: fixed;right: 30px;bottom: 50px;font-size: 12px;cursor: pointer;}.gototop a{color: #666;line-height: 20px;display: inline-block;}</style>
