A blazing fast & modern javascript plugin to lazy-load your images with no dependencies.

lazyload, lazy load, lazy, loading, lazy-loading, blazing, fast, performance, lightweight, no dependencies, javascript, plugin
npm install turtle-js@1.0.4


Turtle.js Build Status

Turtle is a blazing fast & modern javascript plugin to lazy-load your images with no dependencies.


  • Extremely fast. (Using Intersection Observer)
  • Lightweight.
  • No dependencies.


Example page on codepen (temporary), click here.


# Using npm
$ npm install --save turtle-js

# Using yarn
$ yarn add turtle-js

Now include turtle and you should be good to go.

// es6
import turtle from 'turtle'

// commonjs
const turtle = require('turtle');

Alternatively you can include a minified version of turtle (or the source code, up to you) on your page via direct file or using our CDN link.

  <script src="https://unpkg.com/turtle-js"></script>


Add .turtle class to your element(s) and the image path using data-src attribute as follows below.

<img class="turtle" data-src="image.jpg" alt="">

If you want to use a placeholder for the real image refer it in the src attribute:

<img class="" src="placeholder.jpg" data-src="" alt="">

Call turtle function anywhere in your code.

// Call turtle


These are the current options that can be modified, change them as you wish.

// Custom options
turtle('.mySelector', config = {
  rootMargin: '0px',
  treshold: 0
Option Default Description
selector .turtle A selector that indicates which class to search elements from.
rootMargin 50px Distance (Y axis) from the element for the event to occur.
treshold 0 Not used by turtle at this time.

Running Tasks

You can run tasks with the yarn or npm shorthand using the following commands:

# Build task
$ yarn build

# Lint task
$ yarn lint

# etc.
$ ...

Browser Support

You can check the browsers supported here.

IE 11 is not supported by turtle.

Files found in the dist folder are es5 compatible.

Todo List

  • Refactor turtle to use async/await.
  • Write tests.
  • Refactor turtle to the bones.

Legend: Checked boxes mean partial completion, checked and crossed items mean they're fully working.


If you feel like I missed something please do send me a message or, alternatively make a pull request/open an issue and we will go from there.


Code released under the MIT license.