slothy

Modern lazy loading of images (445 Bytes gzipped)

Usage no npm install needed!

<script type="module">
  import slothy from 'https://cdn.skypack.dev/slothy';
</script>

README

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://cdn.rawgit.com/tiaanduplessis/slothy/master/dist/slothy.umd.js"></script>
<!-- Or -->
<script src="https://unpkg.com/stoor/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

    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.