Infinity-component NPM

infinity

Unload and reload panes while scrolling. Inspired by airbnb/infinity.

Installation

$ component install component/infinity

Example

var infinity = require('infinity')(window);
var panes = document.querySelectorAll('.pane');

for(var i = 0, len = panes.length; i < len; i++) {
  infinity.add(panes[i]);
}

infinity.refresh();

Events

loading: called once before each visible el is loaded. useful for batch operations.
load: called when a el is to be loaded.
unloading: called once before each el is unloaded. useful for batch operations.
unload: called when an el is to be unloaded.

API

infinity(el)

Initialize infinity with el. el can be either the window or an element with overflow.

infinity.add(el, ...)

Add el to infinity. You may pass any number of arguments to be called with the load and unload functions. The first argument must be the element node.

infinity.add(view.el, view)

infinity.remove(el)

Remove an element from infinity.

infinity.remove(el)

infinity.load(fn)

Add a load function. Defaults to a noop. The arguments passed to add will be passed through load.

infinity.load(function(el, view) {
  // ...
});

infinity.unload(fn)

Add an unload function. Defaults to a noop. The arguments passed to add will be passed through unload.

infinity.unload(function(el, view) {
  // ...
});

infinity.refresh()

Refresh, loading and unloading elements. Call this after adding elements, removing elements, or moving elements programmatically.

infinity.refresh();

infinity.margin(n)

Add "preload margin" to each side of the container. This will allow you to start loading elements before they appear in viewport. n defaults to 0.

For example, for infinity.margin(200), the load function would trigger when the element is within 200px from being in view.