vue-lazyload-akamai

Vue.js lazy load image directive with akamai image converter

💅 Demo Page

https://bliblidotcom.github.io/vue-lazyload-akamai/

or via forked version here: https://mazipan.github.io/vue-lazyload-akamai/

🛠 Install with NPM/Yarn

npm install vue-lazyload-akamai
// OR
yarn add vue-lazyload-akamai

🚀 Usage Guide

Add plugins in main.js

import VueLazyloadAkamai from 'vue-lazyload-akamai'
Vue.use(VueLazyloadAkamai, {optionalConfigs})

✅ Available configs explanations:

Config Name	Type	Description
`useWebp`	Boolean	Using webp when support
`quality`	Number	Quality of image (using scala from 10-100)
`width` & `height`	Number	Width and Height of image (in pixel unit)
`fallback`	String	Global fallback image if attr `data-err` not setted
`placeholder`	String	Global placeholder image if attr `src` not setted
`timeout`	Number	Timeout before image replaced (in millisecond unit)

Using in your Vue components:

<img v-lazyimg
    src="{placeholder image}"
    data-src="{original image}"
    data-err="{fallback image}">

✅ Attribute explanations:

Attribute Name	Description
`src`	Use as placeholder/loading image before original image was loaded.
`data-src`	Original image that we want to load after user scroll to it's sections
`data-err`	Image as fallback when original image failed to load (404 response)
`data-quality`	Quality of image (using scala from 10-100)
`data-width`	Width of image in pixel unit
`data-height`	Height of image in pixel unit

🗿 Polyfill

https://github.com/w3c/IntersectionObserver/tree/master/polyfill

▶️ Development

// For development
npm run dev

// For build demo page
npm run build-demo

// For build library file
npm run build-lib

// Publish demo page
npm run publish-demo

// Build and publish demo
npm run dist

A Vue lazy loading directive.

0 Dec 9, 2022

: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

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

63 Jul 19, 2022

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

4 Nov 15, 2022

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

56 Sep 9, 2022

Comments

Feature/prepare-publish-npm
Remove rollup build - change to webpack

Fixing some files for preparing publish in npm registry

Change theme color in demo - using Blibli.com blue hex

Already published v1.0.0 in https://www.npmjs.com/package/vue-lazyload-akamai
opened by mazipan 0