Image loader ... nothing more.
This small lib was created as part of a custom project that is why some solutions here may look a bit awkward. But overall it is quite simple and should be easy to adjust to other custom needs.
- returns a promise - it can be easily chained
- triggers a custom action when each image is loaded (or when it fails to load)
- based on data attributes you can set:
- image alt
- image as background
- image class or element class if set as background
- copy custom data attributes to images
- Init:
imageLoader.loadSceneImages('wrapper-id', 'loader-id')
.then(function(){
// Some action after all images load
});
- Act on image load
document.getElementById('loader').addEventListener('loader-updated', function(){
// Do something
}, false);
- Get preloader data from "imageLoader.preloadData" object
{
imageCount: 8, // images to load
imagesLoaded: 4, // images already loaded
percent: 50 // percent of images loaded
}
- Template - image
<span data-src="IMG/SRC" data-alt="ALT" data-class="CLASS_NAME"></span>
will produce
<img src="IMG/SRC" alt="ALT" class="CLASS_NAME" />
- Template - background
<div data-src-bg="IMG/SRC" data-class="CLASS_NAME" ></div>
will produce
<div class="CLASS_NAME" style="background-image: url('IMG/SRC');"></div>