Tut jQuery-erstellen von Dokument-Fragmenten innerhalb der einzelnen Schleifen?

Also ich habe gelesen, dass jQuery verwendet Dokument-Fragmente intern zu machen, das Rendern schneller. Aber ich Frage mich, ob jemand weiß, ob jQuery verwenden würde createDocumentFragment in dieser situation, wo ich mich Anhängen img-Elementen, um den DOM mit der each-Schleife?

var displayArray = []; //Lots of img elements

$.each(displayArray, function()
{
    $('#imgSection').append(this);
});

Oder würde ich brauchen, um diesen code zu verwenden, um zu reduzieren die Anzahl der browser neu umgebrochen?

var displayArray = []; //Lots of img elements
var imgHolder = $('<div/>');

$.each(displayArray, function()
{
    imgHolder.append(this);
});

$('#imgSection').append(imgHolder);

Auch, die displayArray ist bevölkert von anderen code, hier nicht gezeigt, erzeugt die img-Elemente, basierend darauf, Wege in eine JSON-Datei.

Danke für jeden Rat.

  • .append wird direkt hinzufügen des Elements an dem anderen element. Ich sehe nicht, wie ein Dokument-fragment könnte auch hier funktionieren.
  • Die Idee hier ist, um zu reduzieren die Anzahl der Zeiten, die der browser reflow dem Bildschirm. Ich Frage mich nur, wenn jQuery nicht, dass intern oder nicht.
  • Ja, ich verstehe, dass, aber in diesem Fall werden Sie bei der Iteration über ein array von DOM-Elementen können sagen, und in jeder iteration sind Sie ein element hinzufügen, um ein vorhandenes element in den Baum. Es kann ein zweiter Schritt, wo jQuery ist die Verwendung von Dokument-Fragmenten. Sie haben, um zu vermeiden, fließt ein Teil des selbst.
  • Ahh... das macht jetzt mehr Sinn. Danke.
  • Wenn du "viele von img-Elementen", der browser wird eher ärger mit image laden, als mit dem Umschmelzen.
  • Schon daran gedacht. Die Bilder Vorspannung und sind nicht in den DOM, bis Sie haben eine Breite > 0.
  • Nur Frage mich, warum Vorausladen der Bilder dann legte Sie in den DOM ist besser als Benutzer sehen Sie die Beladung in der Warteschlange (zumindest der Benutzer sehen kann, der Fortschritt des Ladevorgangs)?
  • Die Anwendung, die ich damit beschäftigt war, für den ist eine interaktive virtuelle tour und ich brauchte, um zu laden, die mindestens 6 Bilder vor, damit der Nutzer mit Ihr interagieren. Sonst könnten Sie verwirrt, wenn Sie, versuchen wir, es zu benutzen, bevor die Bilder heruntergeladen wurden. Während das geschah, ich habe ein Ladevorgang-Bildschirm.

InformationsquelleAutor Matt Whitehead | 2013-01-30
  1. 8


    Warum alle die looping-Elemente hinzufügen?

    $('#imgSection').append("<div>" + displayArray .join("") + "</div>");

    Okay, so ist es-Elemente.

    Der Schnellste Weg wird sein, mit Anhängen mit dem array selbst. 

    $("#out").append(elems);

    andere option ist die Verwendung eines div-append

    var div = $("<div/>").append(elems);
$("#out").append(div);

    ABER hängt eine Menge Bilder auf einmal Los ist, schlecht zu sein, es sei denn, Sie sind vorbelastet. Das wird eine Reihe von http-Anforderungen in der Warteschlange.

    jsPerf-test Fällen

    • displayArray enthalten können DOM-Elemente oder jQuery-Objekte.
    • Blender ist richtig, mein displayArray ist bevölkert von einigen anderen code, der hier nicht dargestellt ist, die Bild-Pfade aus einer JSON-Datei und erzeugt die img-Elemente.
    • Gerade aktualisiert
    • Sie können nicht nennen .append() mit einem array, dass wie.
    • Wirklich? Möchten Sie machen eine Wette über, die? jsfiddle.net/A3TM7
    • seltsam - ich bin sicher, ich habe versucht vor und ist fehlgeschlagen
    • Danke für den test-Fällen, die wirklich hilft. Und ja, die Bilder sind vorgespannte und vorgespannte ein zu einer Zeit, Sie sind große Bilder für eine Diashow.
    • laut diesem blog-Artikel - bennadel.com/blog/... - jQuery verwenden eine doc-fragment, wenn Sie übergeben Sie ein array von Elementen zu .append()
    • Danke!!! Das ist die Art von Artikel, die ich suchte. Gut zu wissen.
    • Hi @epascarello , Eine Sache, die ich gar nicht nachvollziehen kann, Vorladen. Wenn Sie die Vorspannung zu viele Bilder, nicht, dass braucht die gleiche Reihe von http-Anfragen? Wann willst du Vorladen, direkt nach dem laden der Seite?
    • Ja, es braucht noch den Anforderungen, aber Sie wollen es alle gleichzeitig angezeigt werden, als Sie benötigen würden, um die Vorspannung. Wenn Sie nicht müssten Sie die leeren Räume.

    InformationsquelleAutor epascarello
  2. 8

    1. Nein, wenn Sie $.each() dann jQuery nicht verwenden DocumentFragment - jQuery hat keine Möglichkeit zu wissen, was Sie tun werden, innerhalb der Schleife, und jeder iteration unabhängig ist.

    2. Dem Punkt, der die Dokument-fragment ist, dass Sie nicht müssen wickeln alle neuen Elemente in ein wrapper-element, wie Sie getan haben in Ihrem zweiten Beispiel - das fragment kann mehrere Elemente enthalten alle die eingefügt werden sollen, an die gewünschte Stelle. Wenn sich Ihre Elemente müssen eine gemeinsame Eltern-dann brauchen Sie nicht Dokument-Fragmente.

    3. jQuery offenbar wird ein Dokument-fragment, wenn Sie übergeben Sie ein array von Elementen direkt auf .append() statt Durchlaufen Sie selbst.

    • Ich denke,", wenn Ihre Elemente müssen einen gemeinsamen Elternteil[...]" ist ein wichtiger Punkt. Vielen Dank für den Hinweis. Bestätigt mein denken.
    InformationsquelleAutor Alnitak
  3. 0

    Wenn Sie wirklich fließt (und habe bemerkt, das die Anzeige zu langsam), Sie können ausblenden und das Bild-holding element:

    var displayArray = […]; //Lots of img elements
var holder = $('#imgSection').hide();
for (var i=0; i<displayArray.length; i++)
    holder.append(displayArray[i]);
holder.show();
    InformationsquelleAutor Bergi
Schreibe einen Kommentar