最近陷VUE这个坑出不去了，一直在更新vue的各种插件，原生都快不会写了，但是因为我懒，看到插件就走不动路...
废话不多说，看走心过程：
npm安装方法
npm install vue-lazyload
CDN安装方法
CDN: https://unpkg.com/vue-lazyload/vue-lazyload.js
<script src="https://unpkg.com/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//尝试加载次数
})
- 官方详解：
image.png
下面提供一个简单的demo：
html：
<template>
<div class="loadingImg">
/*ondragstart="return false" 图片禁止拖动*/
<img v-lazy="img"alt="" v-for="img in list" ondragstart="return false">
<div class="gototop" @click="BackToTop">
<a>回到<br>顶部</a>
</div>
</div>
</template>
js:
<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.scrollTop
console.log(scrollTop)
if(scrollTop >100){
$(".gototop").fadeIn(500);
}
},
},
mounted(){
window.addEventListener('scroll', this.handleScroll)
$(".gototop").hide();
},
created(){
}
}
</script>
css:
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;
}
简单的图片懒加载就实现了。
demo项目已上传到github，demo包含vue-amap,vue-particle,vue-lazyload插件的简单使用：https://github.com/JOSIE1988/VueDemo
