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

Archive pour le mot clé Javascript

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.

Paramètres Optionnels en JavaScript

Dans bien des langages, il est possible de définir des paramètres optionnels dans la signature des méthodes. Ces paramètres prennent une valeure par défaut s'ils ne sont pas spécifiés à l'appel de la méthode.

Par exemple, on pourrait être tenté d'écrire :

var saySomething = function(value = "default value") {
        alert(value);
     }

Seulement, en JavaScript, cela ne fonctionne pas.

Par contre, on peu utiliser une propriété de JavaScript pour arriver à nos fins : si un argument est attendu dans la signature mais pas spécifié dans l'appel, il sera alors de tupe "undefined". On peut donc faire :

var saySomething = function(value) {
      if (typeof value == "undefined") {
        value = "default value";
      }
      alert(value);
    }

Seulement, ce n'est pas très élégant. Si nous avons plusieurs arguments optionnel, la succession de structures conditionnelles peut vite devenir ennuyeuse.

Pour y remédier, on peut utiliser les objets. En Javascript, les objets sont des ensembles de clé/valeur dont les premières sont des dénominations et les dernières des instances d'autres objets. Ils sont comparables aux hashes Ruby et on peut avoir des itérateurs dessus grace à l'instruction in et à la structure de bouche for

Du coup, on pourrait imaginer le code suivant :

var extend_instance = function(destination, source) {
      for (var property in source)
        destination[property] = source[property];
      return destination;
    }
    var saySomething = function(params) {
      params = extend_instance({
        value: 'default value', 
        from: 'Anonymous Caword'
      }, params);
      alert(params.from + "say :" + params.value);
    }

L'appel de la méthode change un peu puisqu'il faut maintenant lui donner un objet, mais cela rend le code plus souple aux changement et n'impose aucun ordre aux arguments.

Pour aller encore un peu plus loin et en gardant les avantages de cette méthode, on pourrait se servir de la variable local aux méthodes : arguments

var extend_instance = function(destination, source) {
      for (var property in source)
        destination[property] = source[property];
      return destination;
    }
    var saySomething = function() {
      params = extend_instance({
        value: 'default value', 
        from: 'Anonymous Caword'
      },arguments[0] || { });
      alert(params.from + "say :" + params.value);
    }