Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

stimulus-lazy-loader

lucien-george58MIT2.0.2

StimulusJS controller to lazy load images

stimulus, stimulusjs, stimulus controller, lazy, load, images, lazy load, lazy load images

readme

License: MIT

Installation

yarn add stimulus-lazy-loader

And register the controller

import {Application} from '@hotwired/stimulus'
import * as LazyLoader from 'stimulus-lazy-loader'

const application = Application.start()
application.register('lazy-loader', LazyLoader)

Usage

<div data-controller="lazy-loader">
    <img src="placeholder.jpg" data-lazy-loader-target="image" data-src="https://via.placeholder.com/150" />
</div

Configuration

Attribute Default Description Optional
data-lazy-loader-target="root" 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. ✅

For more info about the configuration options please visit the MDN documentation on the Intersection Observer API