Simple library for loading images in Javascript
JavaScript
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
README.md
imagejs.js

README.md

ImageJS

Simple (and library agnostic) library for loading images in Javascript. Preloading images is as simple as:

ImageJS.load('http://i.imgur.com/5AEdh4K.png');

Callbacks

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.

Examples

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;
    }
});