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

Copyright © 2018 by Blibli.com Tech Team - Released Under MIT License