Neverending Package Mountain
    Have ideas to improve npm?Join in the discussion! »

    vue-cooler-lazyload
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.6 • Public • Published

    Vue-cooler-lazyload

    npm version npm downloads npm license PRs Welcome

    A vue plugin which support lazyload image and background-image. Here are the advantages:

    • Be lighterweight, just do one thing is that lazyload
    • use the browser native API Intersectionobserver, better performance
    • offer hooks which we could use before and after image loaded

    Demo

    npm install
    npm run dev

    Requirements

    • Vue 2.x

    Installation

    npm

    npm install vue-cooler-lazyload

    Usage

    main.js:

    import Vue from 'vue';
    import lazyloadPlugin from 'vue-cooler-lazyload';
    
    Vue.use(lazyloadPlugin);

    template:

    <div>
      <img v-lazyload="imageurl" />
      <div v-lazyload="imageurl"></div>
    </div>

    if v-lazyload directive is used in div Element, image would be background-image attribute.

    Plugin Options

    key description default options
    border the viewport you want to listen {top: 0, bottom: 0, left: 0, right: 0}(window) {top, bottom, left, right}
    threshold the proportion of element insert into viewport 0(0 means that when a element go into the viewport, image begins load) 0~1
    cacheImage render image at once if the image has been loaded before and don't excuted hooks false boolean
    beforeLoad function that would be excuted when dom loaded null Function(el: HTMLElement): void
    afterLoad function that would be excuted when image loaded null Function(el: HTMLElement): void

    Compatibility

    The compatibility of this plugin depends on compatibility of IntersectionObserver

    License

    MIT

    Install

    npm i vue-cooler-lazyload

    DownloadsWeekly Downloads

    0

    Version

    1.0.6

    License

    MIT

    Unpacked Size

    48 kB

    Total Files

    20

    Last publish

    Collaborators

    • avatar