1.0.0 • Published 3 years ago
vue-lazzy-image v1.0.0
Vue Lazzy Image Component
npm install vue-lazzy-imageHow to use lib
import CoreLazyLoading from 'vue-lazzy-image'
...
components: {
CoreLazyLoading,
},Template
<CoreLazyLoading>
<img src="your_image_link" class="your_class_name" alt="your_alt_name" />
</CoreLazyLoading>Component props
Parameters, which you can pass to vue-lazzy-image component.
| Property | Type | Description |
|---|---|---|
skeleton | boolean | Visibility of your skeleton |
placeholder | object | The placeholder which will be provided has src and class in its properties. The placeholder will be the image before loading the main one |
options | object | Options of IntersctionObserver constructor for your images' parent element |
Options
<CoreLazyLoading :placeholder="{ class: 'className', style: 'height: 200px;' }">
<img
src="your_image_link"
class="your_class_name"
alt="your_alt_name"
/>
</CoreLazyLoading>Visible Skeleton
<CoreLazyLoading :placeholder="{ class: 'className', style: 'height: 200px;' }" :skeleton="false">
<img
src="your_image_link"
class="your_class_name"
alt="your_alt_name"
/>
</CoreLazyLoading>