Deferred image loading

image-defer.js

var ImageDefer = Class.create({
  initialize: function(placeholder) {
    this.placeholder = $(placeholder);

    this.placeholder.update('Loading image...');
    if(ImageDefer.page_loaded) {
      this.preload();
    } else {
      Event.observe(window, 'load', (function() {this.preload()}).bind(this));
    }
  },

  preload: function() {
    this.image = new Image();
    $(this.image).observe('load', this.loaded.bind(this));
    this.image.setAttribute('src', this.placeholder.getAttribute('data-src'));
  },

  loaded: function() {
    this.placeholder.update(this.image);
  }

});
ImageDefer.page_loaded = false;

Event.observe(document, 'dom:loaded', function() {
  $$('.image-defer').each(function(placeholder) {
    new ImageDefer(placeholder);
  })
});

Event.observe(window, 'load', function() {
  ImageDefer.page_loaded = true;
});