✔ Wenn alle Bilder geladen sind

[d_b]

Moin,
Ich möchte gerne einen einfachen Preloader bauen.
Und zwar habe ich ein <div id="thumbs"> mit vielen <img>s. Das <div> ist beim Aufruf der Seite mit einem style="visibility:hidden;" ausgestattet.
Den Ordner lese ich mit php aus und übergebe die Daten an ein Array in Javascript. Jetzt würde ich gerne solange ein <div id="wait"> einblenden, bis alle Bilder in den Cache geladen wurden und dann das <div id="thumbs"> anzeigen.
Wie stelle ich das am besten an? Wie frage ich den Status ab?
Ich muss dazu sagen, dass ich mich kaum mit Javascript auskenne. Ich habe auch schon nach fertigen Preloadern gesucht aber keiner war dabei, der exakt meinen Vorstellungen entsprach.
Bin für eure Hilfe sehr dankbar.
vG
David

 

[chainy]

Ein Beispiel mit Prototype (ist jedoch ungetestet):

Preloader = Class.create({
	_arrStack : null,
	
	initialize : function()
	{
		this._arrStack = [];
	},
	
	addStack : function(el)
	{
		this._arrStack.push(el);
	},
	
	reduceStack : function(el)
	{
		this._arrStack = this._arrStack.without(el);
	},
	
	emptyStack : function()
	{
		return this._arrStack.size() === 0;
	}
});

document.observe('dom:loaded', function(){
	var objPreloader = new Preloader;
	$$('div#thumbs img').each(function(elImg){
		if( elImg.complete == false )
		{
			objPreloader.addStack(elImg);
			elImg.observe('load', function(elImg){
				this.reduceStack(elImg);
				elImg.setStyle({visibility : 'visible'});
				
				if( this.emptyStack() )
				{
					var elWait = $('wait');
					if( Object.isElement(elWait) )
						elWait.hide();
				}
			}.bind(objPreloader, elImg));
		}
	});
});

 

[d_b]

Wow, vielen Dank für die Mühe!
Wusste leider nicht, wie ich das verwenden kann und bin zufällig auf einen Preloader gestossen, den leicht meinen Bedürfnissen anpassen konnte. Also hat sich erledigt und vielen Dank nochmal.
vG
David