nicht angemeldet
DOM-rumfummelei
2 
JürgenB
0 0 
Gunnar Bittersmann
0 1 
Matthias Apsel
0 0 Matthias Apsel
0
0
DOM-rumfummelei
Moin.
Kurze Frage (Quelltextschnipsel siehe unten):
Ich erstelle dynamisch mehrere Bilder (so ca. 50). Diese werden alle per JS übereinander positioniert (position:absolute). Da in der Funktion zum Positionieren ein wenig im DOM herumgefummelt wird, stellt sich mir die Frage, ob ich die Positionierung lieber direkt für jedes Bild einzeln mache, oder nach dem alle fertig sind, alle auf einen Schlag positioniere?
for (var i = 0; i < layerLength; i++) {
... hier passiert auch noch so einiges ...
// Bild angelegt
var overlay = document.createElement('img');
overlay.id = layer[i].Name+'_overlay';
overlay.src = 'img/overlays/'+layer[i].Name+'.gif';
overlay.className = 'overlay';
document.getElementById('my_container').appendChild(overlay);
/*SO*/ setOverlayPosition(overlay); // einzeln positionieren
}
/*ODER SO*/ setOverlayPosition(); // auf einen Schlag positionieren
function setOverlayPosition(overlay) {
var pos = posAbs('overlay_blank'); // eigene Funktion
if(overlay) {
overlay.style.top = pos.top+'px';
overlay.style.left = pos.left+'px';
}
// falls kein einzelnes overlay mitgegeben wurde, werden alle positioniert
else {
var overlays = getElementsByClassName('overlay'); // eigene Funktion
var length = overlays.length;
for (var i=0; i<length; i++) {
overlays[i].style.top = pos.top+'px';
overlays[i].style.left = pos.left+'px';
}
}
}
Hoffe ich konnte Euch mein Problem nahe legen ;-)
Paul
-
Hallo Paul,
schwer zu sagen, was besser ist. Bei der "so"-Variante sparst du eine for-Schleife. Gerendert wird erst, wenn das Script abgearbeitet ist.
Aber eine Anmerkung: Das Laden von 50 Bildern (auf verdacht?) halte ich für Traffic-Klau, bitte denk an die vielen Smartphonenutzer mit 500 MB oder weniger pro Monat. Ich fände es besser, die Bilder erst dann zu laden, wenn sie benötigt bzw. sichtbar werden.
Gruß, Jürgen
-
schwer zu sagen, was besser ist. Bei der "so"-Variante sparst du eine for-Schleife. Gerendert wird erst, wenn das Script abgearbeitet ist.
Danke.
Aber eine Anmerkung: ... Traffic-Klau ...
Die Bilder sind jeweils 600 bis 700 Byte groß. Und da man die Bilder auch alle mit einem Klick an/ausschalten kann, werden in 90% der Fälle sowoeso alle geladen.
Paul
-
@@Paul:
nuqneH
Die Bilder sind jeweils 600 bis 700 Byte groß.
Was sind das für Bilder? Möchtest du vielleicht CSS-Sprites verwenden?
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)-
Was sind das für Bilder? Möchtest du vielleicht CSS-Sprites verwenden?
Die Bilder werden als Markierung von area-tags benutzt. Da diese area-Bereiche ineinander verzahnt sind (und das nicht rechteckig) klappt das wohl nicht. Trotzdem danke!
-
Om nah hoo pez nyeetz, Paul!
Die Bilder werden als Markierung von area-tags benutzt.
Warum sollte man area-tags mit Bildern markieren wollen? Dafür gibt es Syntax-Heileiting.
Matthias
--
1/z ist kein Blatt Papier.
-
Das funzt aber nicht mit area-tags.
-
Om nah hoo pez nyeetz, Paul!
Beachte den Unterschied zwischen tag und element.
Matthias
--
1/z ist kein Blatt Papier.
-
Beachte den Unterschied zwischen tag und element.
Versteh ich nicht ...
-
Om nah hoo pez nyeetz, Paul!
Beachte den Unterschied zwischen tag und element.
Versteh ich nicht ...http://selfhtml.apsel-mv.de/tag-element/tag-element-attribut.html
Matthias
--
1/z ist kein Blatt Papier.
-
-
-
-
-
-
-
Hallo,
Die Bilder sind jeweils 600 bis 700 Byte groß. Und da man die Bilder auch alle mit einem Klick an/ausschalten kann, werden in 90% der Fälle sowoeso alle geladen.
ist Dir bewußt, dass bei *jedem* Bild schnell ein Kilobyte an Protokolloverhead entsteht, der ebenfalls zum Traffic beiträgt? Setzt Du Cookies ein? Wenn ja, denk daran, dass diese bei jedem Request übertragen werden - in beide Richtungen ...
Ich kann mir vorstellen, dass die von Peter Seliger vorgeschlagene Umsetzung mit (maximal) zwei Bildern auch Dir helfen kann.
Freundliche Grüße
Vinzenz
-
Also bei mir ist es so, dass die Markierung nach einem Mausklick an- bzw. ausgeschaltet sein soll - nicht nur beim mouseover. Also muss nicht nur immer ein, sondern n Felder markiert sein.
Paul
-
-
-
-
... lieber direkt für jedes Bild einzeln mache, oder nach dem alle fertig sind, alle auf einen Schlag positioniere?
Zur Info:
Laut Firebug's Zeitmessung läuft die Funktion mit jedem Einzelbild ca. 335 ms und mit der Positionierung auf einen Schlag ca. 287 ms.
Paul