Create a gist now

Instantly share code, notes, and snippets.

// An image preloader without using Image class nor document.images
// Built for a Facebook environment where those two are forbiden. May not work in a regular web page.
// Just change
function Preloader(options) {
var defaultSettings = {
preloaderID: "preloader_id",
container: document.body
};
this.settings = this.extend(defaultSettings, options || {});
this.buildPreloader();
};
Preloader.prototype = {
extend: function(destination, source) {
for (var property in source)
destination[property] = source[property];
return destination;
},
// Prepare the preloader. Just a IMG html element hidden with css.
buildPreloader: function(preloaderId) {
var image = document.createElement('IMG')
.setId(this.settings.preloaderId)
.setStyle({display: 'none'});
this.settings.container.appendChild(image);
},
// Update de src attribute of our hidden tag with the passing url.
// Having the src updated will make the tag to load the image.
preloadPic: function(imageUrl) {
var preloader = document.getElementById(this.settings.preloaderId);
if (preloader) {
preloader.setSrc(imageUrl);
// Don't know why, setting the src make the picture visible.
// Have to hide it again.
preloader.setStyle({display: 'none'});
}
}
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment