https://github.com/marlospomin/turtle
A blazing fast & modern javascript plugin to lazy-load your images with no dependencies.
https://github.com/marlospomin/turtle
javascript lazyload performance plugin
Last synced: 11 months ago
JSON representation
A blazing fast & modern javascript plugin to lazy-load your images with no dependencies.
- Host: GitHub
- URL: https://github.com/marlospomin/turtle
- Owner: marlospomin
- License: mit
- Created: 2017-10-05T17:56:53.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2023-04-19T06:25:14.000Z (almost 3 years ago)
- Last Synced: 2025-03-24T06:51:52.077Z (12 months ago)
- Topics: javascript, lazyload, performance, plugin
- Language: JavaScript
- Homepage:
- Size: 605 KB
- Stars: 10
- Watchers: 1
- Forks: 1
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-blazingly-fast - turtle - A blazing fast & modern javascript plugin to lazy-load your images with no dependencies. (JavaScript)
README
# Turtle [](https://travis-ci.com/marlospomin/turtle)
> 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 [here](https://codepen.io/marlospomin/pen/EbYXqe).
## Install
```bash
# Using npm
$ npm install @marlospomin/turtle
# Using yarn
$ yarn add @marlospomin/turtle
```
Now include turtle and you should be good to go.
```js
// es6
import turtle from '@marlospomin/turtle'
// commonjs
const turtle = require('@marlospomin/turtle')
```
## Usage
Add ```.turtle ``` class to your element(s) and the image path using ```data-src``` attribute according to the example below.
```html
![]()
```
If you want to use a *placeholder* for the real image refer it in the ```src``` attribute:
```html
```
Call turtle anywhere in your code.
```js
// Call turtle
turtle()
```
### Configuring
These are the current default options, change them as you see fit.
| 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. |
Update the default config:
```js
// Custom options
turtle('.mySelector', config = {
rootMargin: '0px',
treshold: 0
})
```
## Running Tasks
You can run tasks with the ```yarn``` command like the example below:
``` bash
# Build task
$ yarn build
# Lint task
$ yarn lint
```
## Browser Support
You can check the browser support [here](http://caniuse.com/#feat=intersectionobserver).
Note: IE 11 is not supported.
## Contributing
Make a pull request and/or open an issue and we will go from there.
## License
Code released under the [MIT](LICENSE) license.