• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

2000 Bildchen in div-Container - Browser stockt bei erstem Laden, später nicht

R

Rincon

New member
Hallo ihr!

Ich habe ein Performance-Problem mit meiner Seite.

Folgendes Szenario: Beim Klick auf einen Button wird per xmlhttprequest eine PHP-Datei aufgerufen, die einen DIV-Container gefüllt mit ca. 2000 Image-Elementen liefert - ein riesiges Schachbrett (60 x 33) mit 4 verschiedenen Kacheln.
Den responseText füge ich per innerHTML in einen vorhandenen DIV-Container ein. Genau hier beginnt mein Problem. Das Einfügen dauert einige (30?) Sekunden und während dieser Zeit ist der Browser nicht ansprechbar. Nach Beendigung des Einfügens läuft alles wieder prima, genauso wenn innerhalb einer Browser-Session ein zweites Mal ein solches "Schachbrett" geladen wird.

Zur Verdeutlichung hier noch der Code der von der PHP-Datei zurückgegeben wird:

HTML: 
<div id="feld">
<img id="bild_1_1_" src="http://forum.jswelt.de/images/stories/0.jpg">
<img id="bild_2_1_" src="http://forum.jswelt.de/images/stories/0.jpg">
<img id="bild_3_1_" src="http://forum.jswelt.de/images/stories/1.jpg">
<img id="bild_4_1_" src="http://forum.jswelt.de/images/stories/0.jpg">
<img id="bild_5_1_" src="http://forum.jswelt.de/images/stories/2.jpg">
<img id="bild_6_1_" src="http://forum.jswelt.de/images/stories/2.jpg">
<img id="bild_7_1_" src="http://forum.jswelt.de/images/stories/1.jpg">
<img id="bild_8_1_" src="http://forum.jswelt.de/images/stories/0.jpg">
<img id="bild_9_1_" src="http://forum.jswelt.de/images/stories/0.jpg">
<img id="bild_10_1_" src="http://forum.jswelt.de/images/stories/0.jpg">
...
</div>

Meine Frage wäre nun ob jemand eine Idee hat wie ich das (erstmalige?) Laden der vielen Bildchen so hinbekommen kann, dass der Brwoser währenddessen nicht nicht reagiert.

Danke schonmal!
 
Zuletzt bearbeitet:
Beim Klick auf einen Button wird per xmlhttprequest eine PHP-Datei aufgerufen, die einen DIV-Container gefüllt mit ca. 2000 Image-Elementen liefert
Zum Vergrößern anklicken....
Du läßt dir also den HTML-Code für 2000 Bilder per PHP-Skript ausgeben und fügst diese Ausgabe mit .innerHTML in dein DIV ein? Am besten läßt du dir nur die wirklichen relevanten Informationen vom PHP-Skript ausgeben, was nach meinem Verständnis die 0, 1, 2 im Dateinamen sind. Und wenn du wirklich 2000 Bilder hast, die sich nur zwischen 0, 1, 2 unterscheiden, würd sich im PHP-Skript noch eine Lauflängenkodierung lohnen!
 
Kannst du mal testen, was da genau so lange braucht? Ob's die Übertragung ist (sollte sie eigentlich bei Asychronität nicht sein) oder das Einfügen in's HTML.
 
Also bei mir werden 2000 Bilder unter 3 Sekunden erzeugt und eingefügt:
Code: 
// ca. 3s
window.onload = function(){
    var time = new Date();
    var img = kkjs.node.create({tag: "img", src: "1.jpg", alt: "1"});
    var frag = document.createDocumentFragment();
    for (var i = 0; i < 2000; i++){
        var clone = img.cloneNode(false);
        clone.src = (clone.alt = i % 4) + ".jpg";
        frag.appendChild(clone);
    }
    document.body.appendChild(frag);
    alert("fragment ready after: " + ((new Date() - time)/1000) + " s");
}

// ca. 3s
window.onload = function(){
    var time = new Date();
    var t = "";
    for (var i = 0; i < 2000; i++){
        t += '<img src="' + (i%4) + '.jpg" alt="' + (i%4) + '">';
    }
    var frag = kkjs.node.create({tag: "div", innerHTML: t});
    document.body.appendChild(frag);
    alert("div ready after: " + ((new Date() - time)/1000) + " s");
}

// ca. 3s
window.onload = function(){
    var time = new Date();
    var t = "";
    for (var i = 0; i < 2000; i++){
        t += '<img src="' + (i%4) + '.jpg" alt="' + (i%4) + '">';
    }
    document.body.innerHTML = t;
    alert("ready after: " + ((new Date() - time)/1000) + " s");
}
 
Hi,

danke schonmal für eure Vorschläge.

Die Übertragungszeit des HTML-Codes ist nicht das Ausschlaggebende, habe ich getestet.

Die relevanten Informationen sind die 0/1/2en und die jeweilige Zuordung zur ID (bspw. "bild_1_1").
Lauflängekodierung hört sich gut an. Verstehe ich es richtig, dass der Ansatz die zu übertragenden Informationen im Idealfall auf "20000" für "2000mal 0" reduzieren würde? In meinem Fall wäre dann wohl zusätzlich noch eine Funktion zur Generierung der ID nötig.

@kkapsner
Danke für deinen Test. Könntest du auch mal probieren den Code für 2000 images zu erzeugen und ihn dann (wie ich) über eine Zuweisung an innerHTML einzufügen? Sieht so aus als liegt hier der Hund begraben, oder?

Ich bin leider gerade nicht zuhause und kann erst dort selbst testen, danke für eure Antworten!
 
Verstehe ich es richtig, dass der Ansatz die zu übertragenden Informationen im Idealfall auf "20000" für "2000mal 0" reduzieren würde? In meinem Fall wäre dann wohl zusätzlich noch eine Funktion zur Generierung der ID nötig.
Zum Vergrößern anklicken....
Richtig verstanden, allerdings wird "20000" nicht funktionieren, da kein Algorithmus erkennen wird, wo die Lauflänge endet und das Klartextzeichen anfängt. In deinem Falle müsstest du noch Trennzeichen hinzufügen. Allerdings brauchst du da auch 2 Trennzeichen pro Block, da du nicht nur Lauflänge von Klartext sondern auch die einzelnen Kodierungen voneinander trennen musst:
Code: 
21T0Z4T1Z32T2 usw.
Am besten wäre es also, wenn du deine 0, 1, 2 durch A, B, C ersetzen würdest. Dann hättest du 21A4B32C3B4A usw.
 
Genau das wird im letzten Test gemacht... auch nur ca. 3s.
Zum Vergrößern anklicken....
Stimmt, sorry - ich hätte in deiner HTML-Box nach unten scrollen sollen... :rolleyes:

Kann es sein, dass der Brwoser beim Rendern der Bilder hängt? Beinhaltete dein Test also auch das Anzeigen von 2000 Bildern under führt die src der Bilder ins Nirvana?

Ich teste mal weiter.. son Mist.

//edit:
Bei näherem Betrachten deines Codes taucht auch schon ne Frage auf:
Woher kommt das Objekt "kkjs" und welche Bibliothek hat die Funktion .node.create?
 
Zuletzt bearbeitet:
Also die Bilder existieren bei mir schon - sind aber ziemlich klein.

Das ist meine persönliche Bibliothek...
 
Hi,
ich habe jetzt die PHP-Date so abgeändert, dass nur noch die Bild-Nummer (0,1,2,3) zurückgegeben wird, also ein String mit 2000 Ziffern.
Per js gehe ich den String dann Zeichenweise durch und erzeuge ein entsprechendes IMG-Element. Die Benötigte ID wird ebenso in dieser Schleife erzeugt.

kkapsner
Okay, deine Bibliothek habe ich natürlich nicht, hab mir mit
HTML: 
var img = document.createElement("img");
img.src= "1.jpg";
img.id = "bild_1_1";
etc. abgeholfen.

Die Performance ist nun eindeutig besser, das ganze dauert bei mir nun rund 5 Sekunden. Mein Code ist gerade noch ziemlich unschön, da steckt wohl noch Potential drin.

Vielen Dank für eure Hilfe, ich werde mich in ein paar Tagen mit meinen Fortschritten melden :)
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben