Simple (and library agnostic) library for loading images in Javascript. Preloading images is as simple as:
ImageJS.load('http://i.imgur.com/5AEdh4K.png');
Several callbacks are available as the image is loading:
ImageJS.load({
start: function(url, width, height) {},
progress: function(url, width, height) {},
dimensions: function(url, width, height) {},
done: function(url, width, height) {}
});
- start: Called when the image starts loading.
- progress: Called repeatedly as the image loads. Percentage of progress is not available in Javascript.
- dimensions: Called as soon as the image dimensions are available (if the image is cached, this is called immediately).
- done: Called when the image is fully loaded.
Load an image, and display it when it finishes loading. Assumes the target element <img id="image" />
is in the HTML:
ImageJS.load({
url: 'http://i.imgur.com/5AEdh4K.png',
done: function(url, width, height) {
document.getElementById('image').src = url;
}
});
Full example with spinner placeholder.
ImageJS.load({
url: 'http://i.imgur.com/5AEdh4K.png',
start: function() {
$('#image')
.css('background-image', 'url("http://www.ajaxload.info/cache/FF/FF/FF/00/00/00/5-0.gif")')
.css('background-position', 'center')
.css('background-repeat', 'no-repeat');
},
dimensions: function(url, width, height) {
document.getElementById('image').width = width;
document.getElementById('image').height = height;
},
done: function(url) {
$('#image')
.css('background-image', 'none');
document.getElementById('image').src = url;
}
});