sloth-loader 🦥

Image Lazy loader Vue Component with intersection observer
Example here

Installation

yarn add sloth-loader
npm i sloth-loader

import component

``
import Slothloader from 'sloth-loader/index.vue';
`

use in component

`

:fadeIn=true
:width=1000
:height=1000
:omitAspect=false
:src=src
alt="Loaded image"
/>

`

Component Props

$3

###### Prop type: String
###### Required: true
value of image source

$3

###### Prop type: Boolean
###### Required: false
set prop to true if you want image to have a transitional fade-in on load.

$3

###### Prop type: String
###### Required: false
Use this to avoid maintaining the set or default aspect ratio of your image if you dont want to define an aspect ratio for your image with the height/width props.

$3

###### Prop type: Number
###### Required: false
If using width, then the height prop is also required to generate an aspect ratio for the image parent.
Though you're providing a width value, we never set the width of the image. This is used strictly to generate an apsect ratio `padding-bottom: ${this.$props.height/this.$props.width * 100}%`

$3

###### Prop type: Number
###### Required: false
If using height, then the width prop is also required to generate an aspect ratio for the image parent.
Though you're providing a height value, we never set the height of the image. This is used strictly to generate an apsect ratio `padding-bottom: ${this.$props.height/this.$props.width * 100}%``

$3

###### Prop type: Number
###### Required: false
Load when is the value in which your image becomes fetched. So if using the value 0.2 then your image will begin to be fetched when it is 20% visible. You can use a value between 0 - 1.0. Leaving this blank will default to 0.5

$3

###### Prop type: String
###### Required: true
Alt tag for image for accessibility