koalazily

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/koalazily@1.0.0/dist/koalazily.umd.js"></script>

Usage

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

  <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.