Vue图片懒加载插件 - vue lazyload的简单使用

Vue module for lazyloading images in your applications. Some of goals of this project worth noting include:

Be lightweight, powerful and easy to use

Work on any image type

Add loading class while image is loading

Supports both of Vue 1.0 and Vue 2.0

github地址: https://github.com/hilongjw/vue-lazyload

下载依赖
```
npm install vue-lazyload --save
```

引入

import Vue from 'vue'

import App from '@/App'

import VueLazyload from 'vue-lazyload'

配置

Vue.use(VueLazyload, {

    error: 'dist/error.png', // 这个是请求失败后显示的图片

    loading: 'dist/loading.gif', // 这个是加载的loading过渡效果

    try: 2 // 这个是加载图片数量

})

组件使用

<template>

  <div class="lazyLoad">

    <ul id="container">

      <li v-for="img in arr">

        <img v-lazy="img.thumbnail_pic_s">

      </li>

    </ul>

  </div>

</template>

<script>

  export default({

    name:"lazyLoad",

    data(){

      return{

        arr:[]

      }

    },

    mounted:function(){

      this.$http.get('/api/data').then(res=>{

        this.arr=res.data.data;

        console.log(this.data)

      })

    },

  })

</script>

<style scoped>

    li{

      list-style: none

    }

</style>

如果需求中是, 不同的组件中默认的loading图不同. 可如下配置

v-lazy:background-image="{src: item.src, error: 'http://domain.com/error.png', loading: 'http://domain.com/loading-spin.svg'}"

巴特西

Vue图片懒加载插件 - vue lazyload的简单使用

最新文章

热门文章