ldlazy JavaScript Library Example

Show Images Only If They Are In Viewport Example

faceangerbutterfly

About

Instead of lazy loading, ldlazy is a lazy "showing" library that shows image only if they are in the viewport.

Usage

include the required files, which could be found in its Github repository:

<link rel="stylesheet" type="text/css" href="path-to-ldlazy-dist/index.min.css"> <script src="path-to-ldlazy-dist/index.min.js"></script>

Then, create and initialize the ldlazy instance:

var ldlz = new ldlazy({ root: document.body, toggle: function(n) { ... } }); ldlz.add( ... );

Configurations

To config ldlazy, pass an object with configs from any of following:

  • root - root element for monitoring scroll.
  • toggle - when visibility changes, toggle will be called with the target node as param. default null.
  • debounce - millisecond delay before handling events. require debounce.js, otherwise will be ignored.

APIs

  • ldlz.add(n) - start monitoring node n for visibility change.
  • ldlz.remove(n) - stop monitoring node n for visibility change.

License

MIT License.

320 Animated Patterns