Skip to content
A lazyload componet work with Vue.sj 2, based on IntersectionObserver.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
config
dist
docs
lib
sample
.editorconfig
.gitignore
CHANGELOG.md
README.md
index.js
package.json
yarn.lock

README.md

vue-lazing npm bundle size (minified + gzip) npm

A lazy loading component work with Vue.js 2, and based on IntersectionObserver.

Installing

# npm
npm i vue-lazing --save

or

# yarn
yarn add vue-lazing

Usage

  • Install plugin.
import Vue from 'vue'
import VueLazing from 'vue-lazing'
Vue.use(VueLazing)
  • Use <vue-lazing> components. Optionally, you can pass 3 kinds of parameters to control how to lazy loading.
<!-- in single component file using default options -->
<template>
  <vue-lazing :threshold="0.5">
    <img data-src="/1.png" src="/default.png">
    <img data-src="/2.png" src="/default.png">
    <img data-src="/3.png" src="/default.png">
    <div>some other elements<div>
    <img data-src="/4.png" src="/default.png">
    <img data-src="/5.png" src="/default.png">
    <img data-src="/6.png" src="/default.png">
    <img data-src="/7.png" src="/default.png">
  </vue-lazing>
</template>

Once target <img> element's visibility is over threshold value, target's src will be replaced by data-src attribute.

API

All API is based on IntersectionObserver. There are more practical experiences.

Options Type Default Description
root HTMLElement null ( means viewport ) The element that is used as the viewport for checking visibility of the target. Must be the ancestor of the target.
rootMargin String 0px Margin around the root.
threshold Number 0.1 (means 10%) A number indicate at what percentage of the target's visibility the replace runner should be executed.

Compatibility

You can check IntersectionObserver compatibility from here, and there is a polyfill for unsupporting browsers.

Changelog

Changelog

You can’t perform that action at this time.