@moshenggui/vue-lazyload

VueLazyLoad

Use the new html5 API （IntersectionObserver） to lazying load image

Install

npm install @moshenggui/vue-lazyload --save

Usage

import Vue from "vue";
import VueLazyload from "vue-lazyload";
 
Vue.use(VueLazyload);
 

<img v-lazyload="url" />

Cases

<template>
  <div>
    <img v-for="url in list" :key="url" v-lazyload="url" :alt="url" />
  </div>
</template>
 
<script>
import Vue from "vue";
import VueLazyload from "./index";
 
Vue.use(VueLazyload);
 
export default {
  data() {
    return {
      list: [
        "http://zhkumsg.gitee.io/gulp-demo/images/1.jpg",
        "http://zhkumsg.gitee.io/gulp-demo/images/2.jpg",
        "http://zhkumsg.gitee.io/gulp-demo/images/3.jpg",
        "http://zhkumsg.gitee.io/gulp-demo/images/4.jpg",
        "http://zhkumsg.gitee.io/gulp-demo/images/5.jpg",
        "http://zhkumsg.gitee.io/gulp-demo/images/6.jpg",
        "http://zhkumsg.gitee.io/gulp-demo/images/7.jpg",
      ],
    };
  },
};
</script>
 
<style scoped>
img {
  min-height: 25vh;
  width: 80%;
  display: block;
  margin: 25vh auto;
  border-radius: 4px;
}
</style>