1. vue-lazy-images
A plugin of lazy-load images for vue2.x
vue-lazy-images
Package: vue-lazy-images
Last modified: Tue, 28 Jun 2022 19:46:41 GMT
Version: 1.4.6
License: MIT
Downloads: 107

Install

npm install vue-lazy-images
yarn add vue-lazy-images

vue-lazyload-images

npm
Build Status
Coverage Status
npm

A plugin of lazy-load images for Vue2.x

Support images lazyload in window or build-in element.

Demo

Demo

Installation

npm

$ npm install vue-lazy-images

or

script

 <script src="dist/VueLazyImages.js"></script>

Usage

Entry.js

 import Vue from "vue"
import VueLazyImage from "vue-lazy-images";
Vue.use(VueLazyImage)

Template

 <lazy-image 
    :src='url'
    :img-class='string'  //or :img-class="['classname1','classname2']"
    :placeholder='url of placeholder or loading image'  
/>

Options

Vue.use(VueLazyImage,options)

key description default type
offset offset distance for pre-loading 0 Number
events events that you want parentNode listen for ['scroll', 'wheel', 'mousewheel', 'resize', 'animationend', 'transitionend', 'touchmove'] Array
throttle spacing interval of continuous calling 0(ms) Number
debounce idle time between two actions 0(ms) Number

RELATED POST

10 Must-Know Windows Shortcuts That Will Save You Time

10 Must-Know Windows Shortcuts That Will Save You Time

Arrays vs Linked Lists: Which is Better for Memory Management in Data Structures?

Arrays vs Linked Lists: Which is Better for Memory Management in Data Structures?

Navigating AWS Networking: Essential Hacks for Smooth Operation

Navigating AWS Networking: Essential Hacks for Smooth Operation

Achieving Stunning Visuals with Unity's Global Illumination

Achieving Stunning Visuals with Unity's Global Illumination

Nim's Hidden Gems: Lesser-known Features for Writing Efficient Code

Nim's Hidden Gems: Lesser-known Features for Writing Efficient Code