/*
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();
}
});
Refactorings
No refactoring yet !
I'm looking at the 'createImgsArray' method and I think it looks a bit messy. Specifically, I think all the '.bind(this)' stuff makes it a little unreadable. Is there any way to clean it up?