dawdle v0.3.0

Dawdle

A tiny (~880b gzip), performant JavaScript lazyloader without dependencies.

Install

Yarn:

yarn add dawdle

NPM:

npm install dawdle --save

Manually:

<script src="dist/dawdle.js"></script>

Use

<img class="example" src="placeholder.jpg" data-src="image-one.jpg">
<img class="example" src="placeholder.jpg" data-src="image-two.jpg">

dawdle('.example');

It is recommended to set the image height so it can take up the appropriate space in the document from the start. If not, Dawdle will wait for the placeholder image to fully load and retrieve its height.

Features

• After all selected images are lazyloaded, Dawdle will stop running automatically to improve performance.
• Both top-to-bottom and bottom-to-top navigation are supported. When you initally land near the bottom of a page (through a hash URL for example), images above your current viewport won't start loading yet.

Options

Selector: string (required)

A querySelector for picking up the image elements that need to be lazyloaded.

Callback: function (optional)

A callback which receives the image (as a DOM node) that has just been lazyloaded. Example usage:

dawdle('.example', img => {
  img.classList.add('visible');
});

API

load()

When loading images asynchronously (through AJAX or a timeout for example), you can call this method. After all the newly inserted images are lazyloaded, Dawdle will stop running again. Example:

const lazy = dawdle('.example');
...
lazy.load();

Support

All browsers that support requestAnimationFrame. If not, images will be loaded immediately (default behavior) as a fallback.

Credits

Logo by Andra Nijman.