README

Turtle.js

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

Features

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

Demo

Example page on codepen (temporary), click here.

Install

# 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.

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

Usage

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
turtle();

Configuring

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 real tests and make them work.
Refactor turtle to the bones.

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

Contributing

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

License

Code released under the MIT license.

turtle-jsdeprecated

Usage no npm install needed!