nicht angemeldet
Hallo,
Zum Thema Div Suppe: Ich verdiene ja auch nich mein geld damit :-)
Soso... ich schenke dir mal folgende Optimierung (oder gibst du mir was dafür?):
/***********************************************************************/
var FaderFramework = {
geladen: false,
vorgemerkt: [], /* synonym zu 'new Array()' */
init: function (einstellungen) { // this ist das FaderFramework-Objekt:
if (!this.geladen) { // Dokument noch unvollständig:
this.vorgemerkt.push(einstellungen); // Einstellungen vormerken
} else { // Dokument vollständig:
var spanElement = this.createFader(einstellungen); // span mit Fader erstellen
if (spanElement) { // wenn ok, warten & starten:
window.setTimeout(function () { spanElement.fader.run(); }, spanElement.fader.viewTime);
}
}
},
start: function () {
var oldWinOnLoad = window.onload; // alten onload-Handler merken
window.onload = function () { // neuen onload-Handler setzen
if (oldWinOnLoad) { oldWinOnLoad(); } // ggf. alten Handler zuerst rufen,
FaderFramework.onload(); // dann unseren Handler
};
},
onload: function () { // onload-Handler (this ist das FaderFramework-Objekt):
var e = document.createElement("link");
e.type = "text/css";
e.rel = "stylesheet";
e.href = "fader-framework/fader-framework.css";
document.getElementsByTagName("head")[0].appendChild(e); // CSS-Stylesheet einbinden
this.geladen = true; // Fader-Framework ist jetzt bereit
while (this.vorgemerkt.length) { // mit allen vorgemerkten Fadern:
this.init(this.vorgemerkt.shift()); // erstellen und laufen lassen
}
delete this.vorgemerkt; // vorgemerkte Fader löschen
},
createFader: function(einstellungen) {
var id = einstellungen.id, original = id && document.getElementById(id);
if (!original || original.fader || einstellungen.bilder.length < 2) { return null; }
var Fader = function (span, einstellungen) { // Konstruktor für Fader (this ist das span-Element)
this.viewTime = einstellungen.viewTime || 2000; // Standard 2s
this.speed = einstellungen.speed || 1; // Überblend-Tempo
this.bilder = einstellungen.bilder; // Bildquellen
this.bilder.rot = function(){this.push(this.shift())}; // Rotiermethode (this ist das Array)
this.bildElmt = span.firstChild; // Vordergrund
this.span = span; // Hintergrund
this.run = function (step) { // run-Methode für schrittweises Überblenden:
var fader = this; // für Closures
step = step || 0; // Deckkraft, Standard 0
this.bildElmt.deckkraft(step); // Deckkraft neu setzen
step += this.speed; // nächste Deckkraft
if (step <= 100) { // noch keine volle Deckkraft:
window.setTimeout(function () { fader.run(step); }, 1); // weiter überblenden
} else { // volle Deckkraft erreicht:
this.bilder.rot(); // Bild-Array rotieren
this.span.style.backgroundImage = "url(" + this.bilder[0] +")"; // neuer Hintergrund
this.bildElmt.deckkraft(0); // Vordergrund durchsichtig
this.bildElmt.src = this.bilder[1]; // neuer Vordergrund
// warten & überblenden:
window.setTimeout(function(){ fader.run(); }, fader.viewTime);
}
};
};
var span = document.createElement("span"); // span-Element als Container
span.style.backgroundImage = "url(" + einstellungen.bilder[0] +")"; // mit Hintergrundbild
var bildElement = document.createElement("img"); // neues Bildelement für Vordergrund
bildElement.src = einstellungen.bilder[1]; // Bildquelle für Vordergrund setzen
bildElement.alt = "Bild"; // Alternaiv-Text setzen
bildElement.deckkraft = function(wert) { // Deckkraft-Methode zuweisen (this ist das bildElement)
this.style.opacity = wert/100;
this.style.filter = "Alpha(opacity=" + wert + ", finishopacity=" + wert + ", style=2)"; // IE
};
bildElement.deckkraft(0); // Vordergrund durchsichtig machen
span.appendChild(bildElement); // und in Hintergrund-Container stecken
span.id = original.id; // id des Originalbildes beibehalten
span.className = "fader"; // CSS Klasse für Positionierung zuweisen
span.fader = new Fader(span, einstellungen); // fader-Eigenschaft für Container setzen
original.parentNode.replaceChild(span, original); // Originalbild durch Container ersetzen
return span; // und diesen zurückgeben
}
};
FaderFramework.start();
/***********************************************************************/
Hier wird nicht für *jedes* Bild ein eigenes img-Element erzeugt und diese im DOM ein- und umgehängt, sondern es reicht ein einziges img-Element pro Fader zum Überblenden, eingebettet in ein span-Element, das eine Hintergrundgrafik hat. Das Original-Bild wird einmalig durch dieses span-Element ersetzt.
Zum Faden ändert das img-Element mit Hilfe einer eigenen Methode seine Deckkraft, und zum enlosen Bildwechseln ändert der Fader nur die src-Attribute des img-Elements und der Hintergundgrafik.
So klappt's übrigens auch mit dem IE. :-)
Im CSS braucht man nur:
/***********************************************************************/
.fader {
position: relative;
display: inline-block;
}
.fader img {
vertical-align: top;
}
/***********************************************************************/
Auf eine CSS-Klasse "next" und eine Methode "next" im Fader wurde verzichtet.
Es fehlen hier die Random-Sache und die automatische Pfad-Anpassung, die im original-Fader-Framework gegen Ende der noch eingbaut sind.
Möglicherweise ist der Verzicht auf die vielen img-Elemente auch ein Nachteil, Stichwort preload von Bildern. Bei einem langsamen Netz könnte es vielleicht zu Problemen kommen, falls eine überblendende Grafik noch nicht (ganz) geladen ist...
In diesem Fall müsste man doch zuerst alle laden, was aber nicht schwer mit obigem Code zu implementieren ist.
Gruß, Optimierer alias Don P ;-)