@marlospomin/turtle NPM

Turtle

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

Example page on CodePen here.

# Using npm
$ npm install @marlospomin/turtle

# Using yarn
$ yarn add @marlospomin/turtle

Now include turtle and you should be good to go.

// es6
import turtle from '@marlospomin/turtle'

// commonjs
const turtle = require('@marlospomin/turtle')

Add .turtle class to your element(s) and the image path using data-src attribute according to the example 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 anywhere in your code.

// Call turtle
turtle()

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:

// Custom options
turtle('.mySelector', config = {
  rootMargin: '0px',
  treshold: 0
})

You can run tasks with the yarn command like the example below:

# Build task
$ yarn build

# Lint task
$ yarn lint

You can check the browser support here.

Note: IE 11 is not supported.

Make a pull request and/or open an issue and we will go from there.

Code released under the MIT license.

4 years ago

4 years ago