stimulus-lazy-loader
v2.0.2
StimulusJS controller to lazy load images
22/weekUpdated 2 years agoMITUnpacked: 28.7 KB
Published by Lucien George
npm install stimulus-lazy-loader
Installation
``bash`
yarn add stimulus-lazy-loader
And register the controller
`js
import {Application} from '@hotwired/stimulus'
import * as LazyLoader from 'stimulus-lazy-loader'
const application = Application.start()
application.register('lazy-loader', LazyLoader)
`
Usage
` | Attribute | Default | Description | Optional | For more info about the configuration options please visithtml
`Configuration
| ------------------------------------ | ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------ |
| | browser viewport | The element that is used as the viewport for checking visibility of the target. Must be the ancestor of the target. | ✅ |data-lazy-loader-root-margin-value
| | "0px" | Margin around the root. Can have values similar to the CSS margin property. This set of values serves to grow or shrink each side of the root element's bounding box before computing intersections. | ✅ |data-lazy-loader-threshold-value
| | [0.0]` | Either a single number or an array of numbers which indicate at what percentage of the target's visibility the observer's callback should be executed. | ✅ |
the MDN documentation on the Intersection Observer API