Voilà is a jQuery plugin that provides callbacks for images, letting you know when they've loaded.
Voilà has an API inspired by imagesLoaded, extended with useful methods like
abort() and support for
naturalHeight in all browsers, which makes it compatible with IE6 & IE7. Multiple loading methods are supported, allowing callbacks to fire as soon as
naturalWidth is available, making Voilà faster than alternatives that wait for
onload to fire.
Get a packaged source file:
Include Voilà below jQuery:
bower install voila
npm install @staaky/voila
// For example;;
options- Object - (optional) An object with Options
callback- Function - (optional) A function called when all images have been loaded
Using a callback is the same as using
Additional callbacks can be attached using
Options can be set as the first parameter.
method- String - The loading method, the default is
'onload'which calls callbacks as soon as
onloadfires. The alternative is
'naturalWidth', which calls callbacks as soon as
naturalWidthis available, images will have dimensions at that point but could still be rendering. Don't use
'naturalWidth'when changing the
srcattribute of an image, it becomes unreliable at that point. Use
'onload'instead in those cases.
// callback as soon as naturalWidth & naturalHeight are available;// give images more time to render by waiting for onload (default);
voila instance can be stored, exposing some extra properties and functions:
var voila = ;
voila.images- Array - Contains an
imageobject for each
voila.abort()- Aborts all callbacks
voila.always(callback)- Add a callback called after all images finished loading
voila.progress(callback)- Add a callback called as each image finishes loading
voila.fail(callback)- Add a callback called if one or more images fail to load
voila.done(callback)- Add a callback called after all images have succesfully loaded
Within the callbacks the
voila instance is always the first argument, the second one can be an
image.imgImageElement - The
imgelement as found in the DOM
truewhen succesfully loaded
Here's how to find out which images have succesfully loaded within the always callback:
Voilà is MIT Licensed.