A plugin of lazy-load images for Vue2.x

Related tags

Lazy Load vue vue-components vue2 lazy-loading vue-plugin lazyload-images vue-lazyload-images
Overview

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
Comments
  • Mutate data, not props

    Mutate data, not props

    This PR removes error [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "imgClass"

    and removes vue antipattern of mutating the props.

    opened by zdenekhatak 4
  • Added alt attribute to images. It's important

    Added alt attribute to images. It's important

    Created a new prop for alt attribute. This is very important for image to have alt attribute. Usage: :img-alt="img.alt" //for data or img-alt='Some string' // for string Full example: <lazy-image :src="'https://api.website.domain/storage/' + p.poza" :img-class="['img-fluid']" placeholder='https://api.website.domain/storage/2K8iWw9Iam1GMPPS7IKyR5JS9Vn4fNzLjsVmnyoK.jpeg' :img-alt="p.nume" />

    opened by NicolaeCasir 2
  • IE 11 never finishes loading

    IE 11 never finishes loading

    In Chrome the image is loaded. In IE 11 it never finishes loading and only the spinner is displayed:

    image

    The Network tab in developer tools doesn't show a request to download image would start either. I tried to debug it but IE 11 is not very friendly. Do you know why is this happening? @yyh1102

    opened by zatziky 2
  • Is the template in ReadMe somewhat confusing

    Is the template in ReadMe somewhat confusing

    Template

    <lazy-image 
    :src='url'
    :placeholder='url of placeholder or loading image'  
>

    Maybe adding a matching close tag is better. After all, the above code is not working for me.

    <lazy-image 
    :src='url'
    :placeholder='url of placeholder or loading image'  
></lazy-image>
    opened by AChaoZJU 1
  • Passive event handler

    Passive event handler

    Could you make the scroll event handler passive? It would make the page more responsive and get rid of the [Violation] Handling of 'wheel' input event was delayed for 283 ms due to main thread being busy. Consider marking event handler as 'passive' to make the page more responsive. warning.

    https://developers.google.com/web/updates/2016/06/passive-event-listeners

    enhancement help wanted 
    opened by zdenekhatak 4
Owner
LowesYang
Everyone can really hold its asset in the blockchain.
LowesYang
GitHub
Lazy load background images for Vue 2

Lazy Background Images for Vue vue-lazy-background-images A simple Vue component for lazy loading background components. This component is only for ba

Darryn Ten 67 Nov 24, 2022
Component-based lazy (CLazy) load images in Vue.js 2

Vue Clazy Load Claziest lazy loader out there! Component-based image lazy loader for Vue.js 2 Swaps between your image and another component when load

Matheus Grieger 107 Nov 16, 2022
Vue.js Image Kit Component with Lazy Load built in and Responsive Images

Vue Image Kit Vue.js Image Kit Component with Lazy Load built in and Responsive Images The inspiration comes from this and a talk from @derevandal in

Igor Guastalla 9 Mar 31, 2022
A Vue.js component to lazy load images using the Intersection Observer.

vue-li-image A Vue.js component to lazy load an image automatically when it enters the viewport using the Intersection Observer API.

null 0 Mar 19, 2021
A Lazy load plugin for Vue 3.x

vue3-lazy Status: Alpha. Lazy load plugin for Vue 3.x inspired by vue-lazyload. This plugin support very simple options, and easy to use. Install $ np

null 2 Feb 8, 2022
Vue.js lazy load image directive with akamai image converter

vue-lazyload-akamai Vue.js lazy load image directive with akamai image converter ??

Blibli.com 2 Aug 13, 2018
The easiest way to lazy load your content

VueLazily The easiest way to lazy load your content. Inspired by vue-promised, recommend to look at it if you need loading/errors handling without laz

Enkot 7 Oct 29, 2022
vue lazy container,By detect the visibility of elements in the page, decide whether to load resources and render.

vue lazy container,By detect the visibility of elements in the page, decide whether to load resources and render.

null 5 Sep 25, 2022
🐌 A small size Vue.js directive for lazy loading images using IntersectionObserver API

?? vue-tiny-lazyload-img A small size Vue.js directive for lazy loading images using IntersectionObserver API Demo Page https://mazipan.github.io/vue-

Irfan Maulana 91 Nov 18, 2021
Vue 2 image and video loader supporting lazy loading, background videos, fixed aspect ratios, low rez poster images, transitions, loaders, slotted content and more.

Vue Visual Vue 2 image and video loader supporting lazy loading. Visual 2.x is a simplification of Version 1.x with a greater reliance on modern brows

Bukwild 56 Sep 9, 2022
simplistic vue.js directive for image lazy loading

Vue Progressive Image Lazy load images while showing a preview. Super tiny, less than half a kilobyte minified and gzipped. usage v-lazy-img adds the

Norman 25 Aug 11, 2021
:camera: Mini Image Lazy Loader for P(R)eact and Vue

Pimg is a Progessive Image Component For React, Preact and Vue.js. It helps in lazy loading of images in a nice and cool way. It's 2KB (gzipped). It h

Ademola. 99 Oct 27, 2022
A small lazy image loader for Vue

lazy-vue lazy-vue is the easiest way to get a lazy image loader working within your vue projects. It is meant to be as simplest as possible, so you do

Gustavo Ocanto 63 Jul 19, 2022
Flexible modal component for Vue with ability of asynchronous lazy loading

vue-async-modal Flexible modal component for Vue with ability of asynchronous lazy loading Usage Firstly, you should add Modal component in your templ

JounQin 37 Nov 14, 2022
simple calculation lib with lazy feature 🎲➕➖➗✖️

vue-lazy-calc this is a simple calculation plugin in lazy way. (inspired by lodash) features vue friendly strong typed lazy evaluation chaining method

Vincent Guo 8 Jul 30, 2020
A super simple image lazy loader for Vue.

cube-vue-image-lazy A super simple image lazy loader for Vue. Install yarn add cube-vue-image-lazy Warning: You'll need to install the w3c Intersectio

Cube 4 Nov 15, 2022
A lightweight web package that loads items in lazy way to achieve high performance and better UX in large lists

Lazy Load List Lazy Load List is a lightweight web package that loads items in lazy way to achieve high performance and better UX in large lists. Rend

OMER ANWAR 22 Dec 26, 2022
A Vue lazy loading directive.

A Vue lazy loading directive.

Vue Interface 0 Dec 9, 2022
Create lazy image, embed, video and element with animation just with attributes.

?? Lazy-attr v1.2.3 Create lazy loading request or element like image, iframe, video... Make custom animation on lazy and not lazy element on all brow

null 1 Jan 4, 2022