Loading indicator for large images based on XMLHttpRequest
##Getting started
- Add to your project plugin -
npm install img-loading-indicator
- Include ImgLoadingIndicator.js and ImgLoadingIndicator.less
- Create img tag with the attribute data-image-loading-url
<img class="js-gallery-item" src="" data-image-loading-url="https://placekitten.com/g/2000/2000" alt="">
- Create instance ImgLoadingIndicator with your options
<script>
new ImgLoadingIndicator({
image: image,
showLoadPercent: true,
callbacks: {
complete: function(event) {
console.log(event);
},
progress: function(event) {
console.info(event)
},
error: function(event) {
console.error(event)
},
}
});
</script>