koala + lazy + kolay (means "easy" in Turkish) = koalazily 🐨

Loading images lazily in a modern way using Intersection Observer API

Install

With package manager:

$ npm install koalazily

# OR

$ yarn add koalazily

Or with CDN:

<script src="https://unpkg.com/[email protected]/dist/koalazily.umd.js"></script>

Usage

Add the data-koalazily tag to images you wish to load lazily:

<img
  data-koalazily="https://source.unsplash.com/300x200/?house/1"
  width="300"
  height="200"
  alt=""
/>
<img
  data-koalazily="https://source.unsplash.com/300x200/?house/2"
  width="300"
  height="200"
  alt=""
/>
<img
  data-koalazily="https://source.unsplash.com/300x200/?house/3"
  width="300"
  height="200"
  alt=""
/>

Then initialize:

koalazily();

Also see the example.

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 'Adds some feature'.
4. Push to the branch: git push origin my-new-feature.
5. Submit a pull request.

Or open an issue.

License

Licensed under the MIT License.