home icon contact icon rss icon last FM icon facebook icon LinkedIn icon Delicious icon twitter icon

Javascript image preloader, without document.images nor Image class

I've maid this twit saying that I built a JavaScript image preloader. Since many wanted to see it. There it is.

I wanted to preload image for a Facebook application displaying a JavaScript photo viewer widget. And when developing Facebook applications, you have deal with Facebook JavaScript rules and what they call FBJS. I already built a FBJS framework, YAPS, helping me (and other developpers) to do simple javascript tasks.
But YAPS can't replace the Image JavasScript class nor the document.images that Facebook prevent us tu use. So I built this code to preload images in a Facebook environment.

Code :

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

};

Usage :

preloader = new Preloader({
  preloaderID: "my_image_preloader",
  container: document.getElementById("my_container")
});
preloader.preloadPic("http://imeuble.info/assets/2008/5/21/stéphane-akkaoui-maxime-guilbot-discussion_1.jpg");

Improvements :

  • If I use the same Preloader instance multiple time in a row, I'm not sure the previous image is entirely preloaded before with change the src attribut with the new url.
  • It would have been great if I could passe an Array of urls to the preloader and let him do the work.
  • It must be many other possible improvments. This feat my needs for the moment. Please feel free to modify it. Post an updated code in the comments.

al dit

le Samedi 04 juillet 2009 à 13h01

I found an hack for preloading images in css (modern browsers only) :

an_element:after { display: none; content: url("/images/first.png"); }

an_element:after { content: url("/images/second.png"); }

an_element:after { content: url("/images/third.png"); }

al dit

le Samedi 04 juillet 2009 à 13h01

Damn it the markdown parser droped my code. Here it is:

#an_element:after { display: none; content: url("/images/first.png"); }
#an_element:after { content: url("/images/second.png"); }
#an_element:after { content: url("/images/third.png"); }