最近陷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