So implementieren Sie das progressive Laden von Bildern

Dies ist eine Technik, die derzeit in vielen Web-Apps zu finden ist. Ich war auch fasziniert, als ich es zum ersten Mal auf Medium bemerkte. Ich musste mehr darüber nachdenken, wie es gemacht wurde, und sogar einige Proben ausprobieren.

Das grundlegende Konzept dahinter ist das progressive Laden von Bildern, das auf vielen Websites häufig verwendet wird. Häufig sind die in inhaltsintensiven Websites verwendeten Bilder groß, sodass Websites es vorziehen, die Bilder gegen Ende oder dann, wenn sie tatsächlich benötigt werden, “faul zu laden”. Wenn beispielsweise ein Bild nur nach einigen Textabschnitten angezeigt wird, wird das Bild erst geladen, nachdem der Benutzer durch den Text gescrollt hat. Auf diese Weise wird dem Benutzer der lesbare Inhalt fast sofort zur Verfügung gestellt, ohne auf die Bilder warten zu müssen. Das ist der konzeptionelle Teil davon.

Der Wow-Faktor ergibt sich aus einigen kleinen Improvisationen, die sie damit machen. Im Fall von “Mittel” wird zunächst eine kleinere Version des Bildes (ein Miniaturbild) heruntergeladen. Dieses Miniaturbild wird dann im Bildbereich mit einer gewissen Unschärfefunktion angezeigt, um ihm den unscharfen Effekt zu verleihen. Auf diese Weise fühlt sich die “Textur” sehr originell an, da sie eine Miniaturversion des Originalbilds selbst ist. Nachdem das gesamte Bild geladen wurde, wird die Leinwand mit einigen Übergangseffekten durch das Originalbild ersetzt, um diesen „Wow-Effekt“ zu erzielen.

Ich habe (noch) nicht gelesen, wie Quora es genau macht, aber wenn ich es mir anschaue, scheint der Prozess ähnlich zu sein.

Dazu gibt es einen sehr detaillierten Medium Post von José M. Pérez. Ich habe auch durch seinen Beitrag erfahren, wie genau das gemacht wurde. Weitere Informationen zum Laden von progressiven Bildern finden Sie hier: Progressive Image Rendering.

Ich war der Ingenieur, der diese Funktion in Quora implementiert hat (so genanntes progressives Laden von Bildern). Ich werde in dieser Antwort darüber sprechen, wie man dies generisch umsetzt:

Im HTML möchten Sie etwas haben wie:


). Mit Img-Tags können die Abmessungen der Bilder nicht sauber festgelegt werden, wenn das Verhältnis von Breite zu Höhe des gewünschten Ausgabebilds möglicherweise von dem des Quellbilds (der Datenquelle im Canvas-Tag) abweicht.

Beachten Sie, dass sich die Bilder sowohl im img als auch in den img Tags im Attribut data-src anstelle des Attributs src . Ohne Javascript wäre die Seite leer.

Als nächstes haben wir in Javascript etwas wie das Folgende, um die Platzhalterbilder zu laden:

Funktion loadPlaceholderImage (Platzhalter) {
if (placeholder.getAttribute (‘data-src’)) {
var placeholder_img = neues Bild ();
placeholder_img.src = placeholder.getAttribute (‘data-src’);
var width = placeholder.getAttribute (‘width’);
var height = placeholder.getAttribute (‘height’);
var ctx = placeholder.getContext (‘2d’);
placeholder_img.addEventListener (‘load’, function () {
ctx.drawImage (
placeholder_img,
0,
0,
Breite,
Höhe);
}, false);
}
}

Funktion loadPlaceholderImages () {
var placeholders = document.querySelectorAll (‘canvas [data-src]’);
// Platzhalterbilder nacheinander beim Laden der Seite laden
[] .forEach.call (Platzhalter, loadPlaceholderImage);
}

// Wir möchten die Platzhalterbilder so schnell wie möglich laden.
loadPlaceholderImages ();

Was dies bedeutet ist:

  • Sobald die Javascript-Datei analysiert und ausgeführt wurde, führen wir loadPlaceholderImages() .
  • loadPlaceholderImages() alle canvas Elemente in unserem HTML- loadPlaceholderImages() , die ein data-src Attribut aufweisen, und ruft für jedes von ihnen loadPlaceholderImage() .
  • loadPlaceholderImage() versucht dann, die Platzhalterbilder zu laden, indem ein Image Objekt erstellt und der src des Image Objekts auf den Wert gesetzt wird, der im data-src loadPlaceholderImage() ist.
  • Sobald das Image Objekt vollständig ctx.drawImage , rufen wir ctx.drawImage , das das Image Objekt mit den im HTML angegebenen Abmessungen in die ctx.drawImage zeichnet.

Sobald dieses JavaScript-Snippet ausgeführt wurde, wird dem Benutzer das verschwommene Platzhalterbild angezeigt.

Um die tatsächlichen Bilder in voller Auflösung in Javascript zu laden, haben wir:

Funktion loadDeferredImages () {
var imgDefer = document.querySelectorAll (‘img [data-src]’);
für (var i = 0; i loadDeferredImage (imgDefer [i]);
}
}

Funktion loadDeferredImage (img_element) {
if (img_element.getAttribute (‘data-src’)) {
img_element.setAttribute (‘src’, img_element.getAttribute (‘data-src’));
img_element.removeAttribute (‘data-src’);
img_element.addEventListener (‘load’, function () {
img_element.style.opacity = 1;

// verstecke das Platzhalterbild
var placeholder_elm = img_element.previousElementSibling;
if (placeholder_elm && placeholder_elm.classList.contains (‘qtext_image_placeholder’)) {
// Ohne Zeitüberschreitung würden wir einen weißen Blitz sehen, bevor das Bild geladen wird.
setTimeout (function () {
placeholder_elm.style.visibility = ‘versteckt’;
}, 1000);
}
});
}
}

window.onload = loadDeferredImages;

In ähnlicher Weise werden alle img Elemente mit data-src Attributen im HTML data-src durchlaufen und der Browser wird dazu veranlasst, diese Bilder herunterzuladen, indem data-src als src. Nachdem die Bilder geladen wurden, setzen Sie die opacity des Elements auf 1 und blenden Sie das Platzhalterbild aus.

In den meisten Fällen wird alles korrekt aussehen, ohne dass das Platzhalterbild zum letzten Mal ausgeblendet wird. In Fällen, in denen das reale Bild transparent ist und Sie das Platzhalterbild nicht ausblenden, sieht es jedoch recht seltsam aus.

Eine Demo dazu finden Sie unter: Progressive-Image-Loading – JSFiddle

Wie das progressive Laden von Bildern von Medium funktioniert, hat einen ähnlichen, aber etwas anderen Ansatz. Schauen Sie sich das also auch an.