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// commonjsconst 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.
Usage
Add .turtle class to your element(s) and the image path using data-src attribute as follows below.
If you want to use a placeholder for the real image refer it in the src attribute:
Call turtle function anywhere in your code.
// Call turtle;
Configuring
These are the current options that can be modified, change them as you wish.
// Custom options;
| 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.