Proximity Loader
Triggers an event when the configured elements move into the proximity of the viewport.
Arguments
el
The element to apply the event listener to. Elements defined in
list
must be descendents of this element.
list
A comma-separated list of element selectors to watch the position of.
klass
A custom parameter to to pass through with the success event.
success
The event type to be triggered when a watched element is in proximity.
threshold
The minimum distance from the current viewport to trigger the success event.
debounce
Delay in milliseconds to trigger the scroll callback.
Usage
The following example will combine the proximity loader with the asset reveal module to lazyload some images. When the matched image elements are close to the viewport proximity loader will trigger the
:asset/loadDataSrc
event to be picked up by the asset reveal instance.
require ['lib/utils/proximity_loader', 'lib/utils/asset_reveal'], (ProximityLoader, AssetReveal) ->
assetReveal = new AssetReveal(
el: '#container'
)
proximityLoader = new ProximityLoader(
el: '#container'
list: '[data-src]'
success: ':asset/loadDataSrc'
)
<div id="container">
<img data-src="..." data-alt="..." />
<img data-src="..." data-alt="..." />
<img data-src="..." data-alt="..." />
</div>