Performant Image Lazy Loading Library – Turtle.js

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


Performant Image Lazy Loading Library – Turtle.js


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 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" 

Initialize the library and done.


Default configuration options.

  // 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