Proximity Loader

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>