https://github.com/component/infinity

infinite scrolling with loading and unloading.
https://github.com/component/infinity

Last synced: about 2 months ago
JSON representation

infinite scrolling with loading and unloading.

• Host: GitHub
• URL: https://github.com/component/infinity
• Owner: component
• Created: 2013-08-07T20:11:38.000Z (about 11 years ago)
• Default Branch: master
• Last Pushed: 2016-03-23T19:09:35.000Z (over 8 years ago)
• Last Synced: 2024-07-06T23:41:51.204Z (3 months ago)
• Language: HTML
• Homepage: http://component.github.io/infinity/
• Size: 25.4 KB
• Stars: 105
• Watchers: 9
• Forks: 5
• Open Issues: 2
• Metadata Files:
  • Readme: Readme.md
  • Changelog: History.md

Awesome Lists containing this project

README

        

# infinity

  Unload and reload panes while scrolling. Inspired by [airbnb/infinity](http://github.com/airbnb/infinity).

## Installation

  Install with [component(1)](http://component.io):

    $ component install component/infinity

## Example

```js

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.

```js

infinity.add(view.el, view)

```

### infinity.remove(el)

  Remove an element from `infinity`.

```js

infinity.remove(el)

```

### infinity.load(fn)

  Add a load function. Defaults to a `noop`.

  The arguments passed to add will be passed

  through `load`.

```js

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`.

```js

infinity.unload(function(el, view) {

  // ...

});

```

### infinity.refresh()

  Refresh, loading and unloading elements. Call this

  after adding elements, removing elements, or moving

  elements programmatically.

```js

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.

### infinity.unbind()

  Unbind all infinity events

## License

  MIT