Performant Image Lazy Loading Library – Turtle.js

Preview:

Description:

Turtle.js is a lightweight, high-performance image lazy loading library that uses Intersection Observer API to detect whether your images are visible in the viewport.

How to use it:

Install and import the Turtle.js.

# Yarn
$ yarn add turtle-js
# NPM
$ npm install turtle-js --save

// ES 6
import turtle from 'turtle-js';
// CommonJS:
const turtle = require('turtle-js');

Or download the zip and then include the JavaScript file ‘turtle.min.js’ in the document.

<script src="js/turtle.min.js"></script>

Insert placeholder element and specify the image path to be loaded when it comes into view.

<img src="placeholder.png" 
     data-src="image-to-load.jpg" 
     class="turtle">

Initialize the library and done.

turtle();

Default configuration options.

turtle({
  // If the image gets within 50px of the Y axis, start the download
  rootMargin: '50px',
  threshold: 0
});

Changelog:

08/02/2020

• v1.0.6