vue-lazyload图片懒加载

1.代码：

<div id="main">
    <template>
        <div>
            <ul id="container">
                <li v-for="img in list">
                    <img v-lazy="img">
                </li>
            </ul>
        </div>
    </template>
</div>
<script src="https://unpkg.com/vue-lazyload/vue-lazyload.js"></script>
<script>
    import Vue from 'vue'
    import App from './App.vue'
    import VueLazyload from 'vue-lazyload'
    // or with options
    Vue.use(VueLazyload, {
      preLoad: 1.3,
      error: 'dist/error.png',
      loading: 'dist/loading.gif',
      attempt: 1
    })

    new Vue({
      el: '#main',
      data:{
            list: [
            'http://st2.depositphotos.com/thumbs/2627021/image/9638/96385166/api_thumb_450.jpg!thumb',
            'http://st2.depositphotos.com/thumbs/2627021/image/9638/96385166/api_thumb_450.jpg!thumb',
            'http://st2.depositphotos.com/thumbs/2627021/image/9638/96385166/api_thumb_450.jpg!thumb',           
            ]
        }
    })
</script>
           

2.配置vue-lazyload

Vue.use(VueLazyload, {
    error: 'static/error.png',//这个是请求失败后显示的图片
    loading: 'static/loading.gif',//这个是加载的loading过渡效果
    try: 2 // 这个是加载图片数量
})
           

地址：

http://blog.csdn.net/longzhoufeng/article/details/72726104

github地址：https://github.com/hilongjw/vue-lazyload 来查看API