Performant Image Lazy Loading Library – Turtle.js

Category: Image , Javascript , Loading | December 8, 2017
Author: marlospomin
Views Total: 814
Official Page: Go to website
Last Update: December 8, 2017
License: MIT

Preview:

Performant Image Lazy Loading Library – Turtle.js

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
});

You Might Be Interested In:


Leave a Reply