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!
- Fork it.
- Create your feature branch:
git checkout -b my-new-feature
. - Commit your changes:
git commit -am 'Adds some feature'
. - Push to the branch:
git push origin my-new-feature
. - Submit a pull request.
Or open an issue.
License
Licensed under the MIT License.