slothy

Modern lazy loading of images in under 500 bytes

Table of Contents

Table of Contents

About

Install

Usage

Contribute

License

About

Slothy uses the Intersection Observer API to ensure the efficient loading of images as they come into view. Since the API is fairly new so you may want to use a polyfill if your targeting older browsers. If Intersection Observer API is not available slothy will fall back to the normal loading of images.

Install

With package manager:

$ npm install slothy
# OR
$ yarn add slothy

Or with CDN:

<script src="https://unpkg.com/slothy@1.2.0/dist/slothy.umd.js"></script>

Usage

Add the data-slothy tag to images you wish to lazy load:

  <img data-slothy="http://loremflickr.com/1600/1200" alt="">
  <img data-slothy="http://loremflickr.com/1200/1000" alt="">
  <img data-slothy="http://loremflickr.com/2000/1500" alt="">

Then initialize:

slothy()

Also see the example.

API

Table of Contents

• slothy

slothy

Lazy load images

Parameters

• options Object? Configuration options for slothy (optional, default {})
  • options.offset (String | Number) Offset from image in px to start loading, defaults to 100px (optional, default 100)
  • options.threshold Number Either a single number or an array of numbers which indicate at what percentage of the target's visibility the observer's callback should be executed. (optional, default 0.01)
  • options.onLoad Function Function triggered when image is done loading
  • options.dataSelector String Data selector on element. Default is "slothy" (optional, default 'slothy')

Contributing

Contributions are welcome!

1. Fork it.
2. Create your feature branch: git checkout -b my-new-feature
3. Commit your changes: git commit -am 'Add some feature'
4. Push to the branch: git push origin my-new-feature
5. Submit a pull request :D

Or open up a issue.

License

Licensed under the MIT License.