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: 12 days 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 (about 7 years ago)
• Default Branch: master
• Last Pushed: 2023-04-19T06:25:14.000Z (over 1 year ago)
• Last Synced: 2024-08-10T09:13:28.753Z (3 months ago)
• Topics: javascript, lazyload, performance, plugin
• Language: JavaScript
• Homepage:
• Size: 605 KB
• Stars: 10
• Watchers: 2
• 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 [![Build Status](https://travis-ci.com/marlospomin/turtle.svg?token=PosttrboZuYSHkXP2Lm8&branch=master)](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.