schnellste Art (~200) Bilder zu wechseln / OOP

[Lucien]

Hi Leute!

Vor ein paar Tagen hab ich für mich entdeckt, dass Javascript ja auch die Erstellung eigener Objekte zulässt und mich dazu gleich informiert. Nach ein paar Experimenten sind bei mir mal wieder Fragen aufgekommen:

1. ohne OOP-Bezug: Wenn ich ~200 (oder einfach sehr viele) Bilder (z.B. wie Fliesen, neben und untereinader angeordnet) gegen andere Bilder, mit den selben Maßen, austauschen möchte, gibt es dann verschieden performante Arten das zu lösen? (performant im Sinne von: am schnellsten dargestellt)

• über das DOM die Bilder-Nodes löschen und neu einfügen
• über das DOM jeweils das "src" Attribut der Bilder-Nodes ändern
• über "document.innerHtml" einfach den HTML-Code für die neuen Bilder schreiben
• neue Bilder-Nodes über den Alten erstellen (z-index) und danach die Alten löschen (-> die Neuen werden schon dargestellt während die Alten gelöscht werden).

Ausserdem habe ich gelesen, dass man lieber nicht mit "eval()" arbeiten sollte (Performance, ...). Geht bei "document.getElementById("bild" + zahl)" das ""bild" + zahl" dann nicht auch in Richtung "eval()"? Wie könnte ich denn sonst durch alle Kind-Nodes eines Elements Iterieren?

2. mit OOP-Bezug: In den von mir gefundenen Erklärungen waren diverse Unterschiede, kennt jemand eine ordentliche, "richtige" Erklärung der OOP mit Javascript. Z.B. Methoden Definition:

1. Möglichkeit:
function MyObject()
{
    this.my_method = function (argument)
    {
        /* schnipp schnapp */
    }
}

2. Möglichkeit:
function my_method(argument)
{
        /* schnipp schnapp */
}

function MyObject()
{
    this.my_method = my_method;
}

Gibt es da jetzt einen Unterschied (ich meine nein)? Mir gefällt Möglichkeit 1 übrigens besser :-)

Zur Übersicht nochmal alle Fragen :-)
1 a) Schnellste Art mit Javascript viele Bilder auszutauschen
1 b) DOM: Iteration duch alle Kinder eines Elements
2 a) "Gute", "richtige" Erläuterung der OOP mit Javascript
2 b) Unterschied der gezeigten Methoden-Definition

Grüsse, Lucien

[Tom2]

Hi Luciien

1. ohne OOP-Bezug: Wenn ich ~200 (oder einfach sehr viele) Bilder (z.B. wie Fliesen, neben und untereinader angeordnet) gegen andere Bilder, mit den selben Maßen, austauschen möchte, gibt es dann verschieden performante Arten das zu lösen?

Weshalb probierst du die paar Möglichkeiten nicht kurz durch und teilst uns das Ergebnis mit? ;-)

Geht bei "document.getElementById("bild" + zahl)" das ""bild" + zahl" dann nicht auch in Richtung "eval()"?

Ne, eval() versucht den String zu interprätieren. Dann hast du anstelle von '"bild" + zahl' für zahl = 3 einfach '"bild" + 3' was eval() auswerten muss. Solcher Code ist den Overhead nicht wert.

Wie könnte ich denn sonst durch alle Kind-Nodes eines Elements Iterieren?

Mit einer Schleife, die folgendermassen auf die Bilder zugreift:
document.getElementByID("ElternDiv").childNodes[index]
(Zeile aus FF, nicht ausprobiert)

FG & HTH

Tom2

[Lucien]

Hi!

Weshalb probierst du die paar Möglichkeiten nicht kurz durch und teilst uns das Ergebnis mit? ;-)

Also gut :-)
Es hat sich herausgestellt das es wohl am besten funktioniert, wenn man durch die Bilder-Knoten iteriert und dann mit setAttribute("src", ...) die Bildquelle neu setzt. Damit bin ich erst mal zufrieden!

[...] Solcher Code ist den Overhead nicht wert.

Das hab ich jetzt beim Iterieren gesehen. Ist viel eleganter als jedes Bild über eine id anzusprechen (-> getElementById("bild_" + id).src = ...).

Jetzt muss mir nurnoch jemand was zu der Sache mit den Methoden erzählen, dann bin ich glücklich...

Grüße, Lucien

[Daniel Thoma]

Hallo Lucien,

2 a) "Gute", "richtige" Erläuterung der OOP mit Javascript

http://devedge.netscape.com/library/manuals/2000/javascript/1.5/guide/
Speziell Kapitel 7 und 8

2 b) Unterschied der gezeigten Methoden-Definition

Im ersten Fall ist die Methode eben nur über das Objekt aufrufbar, im anderen Fall wird nur auf eine globale Funktion verwiesen.
Ansonsten besteht kein Unterschied.

Grüße

Daniel

[Lucien]

2 a) "Gute", "richtige" Erläuterung der OOP mit Javascript
http://devedge.netscape.com/library/manuals/2000/javascript/1.5/guide/
Speziell Kapitel 7 und 8

Danke! Das sind GUTE Informationen! :-)

Grüsse, Lucien

[MudGuard]

Hi,

1. ohne OOP-Bezug: Wenn ich ~200 (oder einfach sehr viele) Bilder (z.B. wie Fliesen, neben und untereinader angeordnet) gegen andere Bilder, mit den selben Maßen, austauschen möchte, gibt es dann verschieden performante Arten das zu lösen? (performant im Sinne von: am schnellsten dargestellt)

Am performantesten dürfte es so sein:

ein div (oder sonstiges Element) mit den ursprünglichen 200 Bildern.
ein weiteres div (oder sonstiges) mit den ausgetauschten 200 Bildern.

Das erste div ist ursprünglich sichtbar, das zweite div ist ursprünglich unsichtbar (display:none;)

Beim Wechsel wird dann nur für das erste div display auf none und für das zweite display auf block gesetzt.

Die Methode funktioniert natürlich nur, wenn die URLs der ausgetauschten Bilder nicht von weiteren Bedingungen, die pro Bild unterschiedlich sein könnten, abhängen.

cu,
Andreas