1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

/*
 Example Usage:
    new ImagePreloader({
     png: [ 'button_communities_hover', 'button_home_plans_hover', 'talk_to_us_button_hover', 'talk_to_us_close_hover' ],
     jpg: [ 'talk_to_us_hover', 'talk_to_us_interior_hover' ]
    }, { delay: 1.5 });
*/

var ImagePreloader = Class.create({
  initialize: function(images, opts){

    this.images = $H(images);
    if ((this.images.keys().length <= 0)||(Prototype.Browser.MobileSafari)) return;

    this.options = {
      path:   opts.path   || '/images/',
      delay:  opts.delay  || 2,
      id:     opts.id     || 'image_preloader'
    };
    
    this.body = $('body') || $$('body').first();

    this.src = new Template('#{path}#{name}.#{ext}');
    this.img = new Template('<img src="#{src}" />');
    this.srcs = $A();
    this.imgs = $A();
    
    this.boundCreateImgsArray = this.createImgsArray.bind(this);

    Event.observe(window, 'load', this.boundCreateImgsArray);
  },
  createImgsArray: function(){
    (function(){
      this.images.each(function(pair){
        pair.value.each(function(name){
          this.srcs.push(this.src.evaluate({path: this.options.path, name: name, ext: pair.key}));
        }.bind(this));
      }.bind(this));
      
      this.srcs.each(function(src){
        this.imgs.push(this.img.evaluate({src: src}));
      }.bind(this));
      
      this.loadImages();

    }.bind(this)).delay(this.options.delay);
  },
  loadImages: function(){
    this.body.insert(
      new Element('div', { id: this.options.id }).hide().insert(this.imgs.join(''))
    );
    this.removeImages.bind(this).delay(this.options.delay + this.imgs.length);
  },
  removeImages: function(){
    $(this.options.id).remove();
  }
});