1.2.1 ā¢ Published 6 years ago
vue-lazyload-akamai v1.2.1
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 distCopyright Ā© 2018 by Blibli.com Tech Team - Released Under MIT License