Neoclassical Programming Multitude
    Have ideas to improve npm?Join in the discussion! »

    @moshenggui/vue-lazyload

    1.0.0 • Public • Published

    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>

    Install

    npm i @moshenggui/vue-lazyload

    DownloadsWeekly Downloads

    0

    Version

    1.0.0

    License

    ISC

    Unpacked Size

    12.5 kB

    Total Files

    5

    Last publish

    Collaborators

    • avatar