@astrocaleb/lazy-render

lazy-render

A super simple lazy render script for whatever element(s) you want.

Getting started

dist/
├── lazy-render.js
└── lazy-render.min.js

Installation

# npm
npm i @astrocaleb/lazy-render

In browser:

<script src="/path/to/lazy-render.js"></script>

Usage

Markup Structure

<... data-lazy-render="<attribute>;<value>" ...>

JS Syntax

new LazyRender([options])

• options (optional)
  • Type: Object
  • The options for rendering. Check out the available options.

Example

<img data-lazy-render="src;picture-1.jpg">
<img data-lazy-render="src;picture-1.jpg">
<img data-lazy-render="src;picture-2.jpg">
<img data-lazy-render="src;picture-3.jpg">

import LazyRender from '@astrocaleb/lazy-render';

// Delay rendering of elements, all default values
new LazyRender();

// or

// Delay rendering, passing in options
new LazyRender({
  threshold: 75,
  callback: function() {
    alert("I rendered!");
  }
});

Options

You can set LazyRender options with new LazyRender(options).

threshold

• Type: Number
• Default: 50

Adjust when elements load, relative to the viewport. Threshold is a percentage of the viewport height and width, similar to the CSS vh or vw unit.

callback

• Type: Function
• Default: no-op

Callback that fires immediately after the element is set to render.

License

MIT