BETA MODUL: Lazyload bzw. unveil (nachträgliches laden der Bilder)

[Thomas K.]

Hey,

ich habe gerade bei mir im Shop unser Produkt Listing auf unveil umgestellt.
Unveil ist ein Image-After-Loading Script. Also das Gegenteil von Pre-Loading.

Website: http://luis-almeida.github.io/unveil/
github: https://github.com/luis-almeida/unveil
Unveil ist eine lightweight-Variante von Lazyload mit weniger als 1kb Scriptgröße.

Ihr könnt euch das Beispiel hier angucken:
https://www.purpleleaves.de/T-Shirts-Men---1.html (schnell scrollen, falls zu schnell geladen wird)

Funktionsweise:
Es werden kleine Bilder (1-3kb) als Default-Bilder angegeben. Erst, wenn der Viewpoint des Browsers i.d. Nähe des Bildes kommt (Standard sind 200px Entfernung), dann wird das entsprechende Bild geladen.
Vorteil: Weniger HTTP-Requests bei Pageload, also mehr Pagespeed sowie geringerer Traffic.

Zur Umsetzung:

Ich benutze nicht das Standardtemplate, deshalb nur eine grobe Beschreibung:

Gehe zu templates/YOUR_TEMPLATE/module/product_listing/YOUR_PL_TEMPLATE.html:

Finde das Produktbild und füge Klasse "unveil" hinzu.
Ändere das Attribut "src" in "data-src" um, und füge als "src" Attribut deine kleine Blanko-Grafik ein. In meinem Fall ist das eine graue Fläche mit unsere Logo drauf.

So sieht mein Code aus. Allerdings ist das Template abgewandelt. Bitte nicht gedankenlos kopieren:

Code: PHP  [Auswählen]

<a href="{$module_data.PRODUCTS_LINK}" title="{$module_data.PRODUCTS_NAME}{if $module_data.PRODUCTS_SHORT_DESCRIPTION != ''} ({$module_data.PRODUCTS_SHORT_DESCRIPTION}){/if}">
            <img class='unveil' src="/images/unveil-225x300-leave.jpg" data-src="{$module_data.PRODUCTS_IMAGE}"
                alt="{$module_data.PRODUCTS_NAME}{if $module_data.PRODUCTS_SHORT_DESCRIPTION != ''} ({$module_data.PRODUCTS_SHORT_DESCRIPTION}){/if}"
                class="productImageBorder" /></a>

Als letzten Schritt füge die Bibliothek und das Aktivierungsscript im Javascript hinzu (z.b. templates/YOUR_TEMPLATE/javascript/general.js.php).
Bibliothek (lade von Website i.d. aktuellen Version):

Code: PHP  [Auswählen]

<script src="/templates/YOUR_TEMPLATE/javascript/jquery.unveil.min.js"></script>

Aktivierungscode:

Code: PHP  [Auswählen]

<script>
$(document).ready(function() {
        $(".unveil").unveil();
});

</script>

Dieser Code sucht alle Vorkommnisse der Klasse "unveil" und aktiviert die Funktionalität.

Ich weiß, dass die Vorgaben nicht für Anfänger geeignet sind, aber habe kein Blanko-System und wollte trotzdem Teilen. Bei Interesse kann sicherlich einer derjenigen, die es umsetzen, es korrekt kommentieren.

Grüße

Thomas

CSS:

Code: CSS  [Auswählen]

.unveil {
        display: none;
}

javascript:

Code: Javascript  [Auswählen]

$(document).ready(function() {
        $(".unveil").show();
        $(".unveil").unveil();
});

mein product-listing-code:

Code: PHP  [Auswählen]

<a href="{$module_data.PRODUCTS_LINK}" title="{$module_data.PRODUCTS_NAME}{if $module_data.PRODUCTS_SHORT_DESCRIPTION != ''} ({$module_data.PRODUCTS_SHORT_DESCRIPTION}){/if}">
  <img class='unveil productImageBorder' src="/images/unveil-225x300-leave.jpg" data-src="{$module_data.PRODUCTS_IMAGE}"
                alt="{$module_data.PRODUCTS_NAME}{if $module_data.PRODUCTS_SHORT_DESCRIPTION != ''} ({$module_data.PRODUCTS_SHORT_DESCRIPTION}){/if}" />
  <noscript>
   <img class='productImageBorder' src="{$module_data.PRODUCTS_IMAGE}" alt="{$module_data.PRODUCTS_NAME}{if $module_data.PRODUCTS_SHORT_DESCRIPTION != ''} ({$module_data.PRODUCTS_SHORT_DESCRIPTION}){/if}" />
  </noscript>
</a>

[EDIT jannemann 16.08.2013: Code ergänzt.]

Linkback: https://www.modified-shop.org/forum/index.php?topic=27273.0

[e-moves]

Hallo Thomas,
besten Dank für´s Teilen.
Eine Verständnisfrage: Warum werden weniger HTTP-Requests benötigt?
Ich denke, man sollte noch erwähnen das wegen des data- Attributs ein HTML5-Doctype benötigt wird.
Grüße
Dirk

[noRiddle (revilonetz)]

Nette und schnelle Sache, danke für die Info, das Script kannte ich noch nicht.
Allerdings sollte unbedingt ein Fallback existieren für den Fall, daß Javascript deaktiviert ist (z.B. eigtl. Bild in noscript-tag).
Ansonsten wird nämlich nur das Ersatzbild angezeigt.

Gruß,
noRiddle

[Thomas K.]

Stell dir vor Du hast eine Seite mit 50 Produkten (Bildern) und der Kunde klickt auf das vierte Produkt.
Bisher hat unveil 8 Bilder geladen. Das sind 8 HTTP-requests, nicht 50.
Außerdem sind diese Requests nicht mehr blockierend, sondern asynchron nach document.ready.
Blockierend ist nur die Default-Grafik, das ist aber nur ein Request.

Ich selbst habe den Doctype auf HTML5 umgestellt, denke aber, dass Du den nicht brauchen wirst. Wenn wir von validem xhtml reden, dann wäre data-src ein unbekanntes Attribut, aber immerhin syntatisch korrekt.

@noRiddle:
Das ist problemlos möglich. Dafür die Website angucken.

[noRiddle (revilonetz)]

Schon klar, ich sagte es nur der Vollständigkeit halber und du hast es auf deiner Seite auch nicht.

Gruß,
noRiddle

[e-moves]

Ok. Danke für die Aufklärung.

[cayuco]

Das klingt sehr interessant, zumal Zeit ein wichtiger Faktor geworden ist. Meine Frage ist, was indiziert Goggle als Produktbilder. Im Grunde ruft Goggle doch die Seite garnicht physisch auf, oder? Werden dann diese Vorschaubilder indiziert, oder die tatsächlichen Produktbilder?
Danke schon mal.

[voodoopupp]

...
@noRiddle:
Das ist problemlos möglich. Dafür die Website angucken.

...und wie genau muss man diesen Fallback denn bauen?

Ansonsten sehr interessante Sache, wollten wir auch schonmal entsprechend umsetzen, nur die Zeit fehlt bisher

Grüße
Dominik

[noRiddle (revilonetz)]

Die richtigen Bilder in einen noscript-tag einbauen.
Also in der Art (nach Default-Template-Vorbild):

Code: XML  [Auswählen]

<noscript>
{if $module_data.PRODUCTS_IMAGE!=''}<a href="{$module_data.PRODUCTS_LINK}"><img src="{$module_data.PRODUCTS_IMAGE}" alt="{$module_data.PRODUCTS_NAME}" class="productImageBorder" /></a>{else}&nbsp;{/if}
</noscript>

Gruß,
noRiddle

[Tomcraft]

Das ergibt doch dann aber eine doppelte Ausgabe. Einmal das Bild "/images/unveil-225x300-leave.jpg" und einmal das richtige Produkt-Bild oder habe ich gerade einen Denkfehler?

Meiner Meinung nach ist es so mit einem einfachen <noscript> nicht getan.

Es wäre prima, wenn jemand das Modul noch um einen Javascript-Fallback erweitern würde.

Grüße

Torsten

[hedon02]

Ne, <noscript> wird nicht in den DOM geladen, wenn "JS" aktiviert ist.

Grüsse

[noRiddle (revilonetz)]

Upps, doch, Tomcraft hat ja Recht.
Es wird ja das Ersatzbild geladen, die Blankografik, insofern man Thomas K. folgt.
Will man eine solche benutzen, hätte man bei deaktiviertem Javascript diese Blankografik und die "echte" Grafik aus dem noscript-tag.

Lösungsvorschläge:

• Blankografik im CSS auf display:none; und mit Javascript als erstes aktivieren.
  (mit jQuery z.B. einfach $('SELECTOR').show();)
  Somit würde bei deaktiviertem Javascript lediglich die echte Grafik angezeigt.
• Nur mit CSS die Grafiken übereinanderlegen,
  was unschöner ist und auch gleich große Bilder zur Bedingung hat.

Gruß,
noRiddle

[Thomas K.]

Das klingt sehr interessant, zumal Zeit ein wichtiger Faktor geworden ist. Meine Frage ist, was indiziert Goggle als Produktbilder. Im Grunde ruft Goggle doch die Seite garnicht physisch auf, oder? Werden dann diese Vorschaubilder indiziert, oder die tatsächlichen Produktbilder?
Danke schon mal.

Gute Frage und ich habe keine konkrete Antwort. Mein SEO meint, dass google data-src erkennt.
Werde das beobachten.

[Thomas K.]

Kann oben leider nicht mehr editieren.

CSS:

Code: CSS  [Auswählen]

.unveil {
        display: none;
}

javascript:

Code: Javascript  [Auswählen]

$(document).ready(function() {
        $(".unveil").show();
        $(".unveil").unveil();
});

mein product-listing-code:

Code: PHP  [Auswählen]

<a href="{$module_data.PRODUCTS_LINK}" title="{$module_data.PRODUCTS_NAME}{if $module_data.PRODUCTS_SHORT_DESCRIPTION != ''} ({$module_data.PRODUCTS_SHORT_DESCRIPTION}){/if}">
  <img class='unveil productImageBorder' src="/images/unveil-225x300-leave.jpg" data-src="{$module_data.PRODUCTS_IMAGE}"
                alt="{$module_data.PRODUCTS_NAME}{if $module_data.PRODUCTS_SHORT_DESCRIPTION != ''} ({$module_data.PRODUCTS_SHORT_DESCRIPTION}){/if}" />
  <noscript>
   <img class='productImageBorder' src="{$module_data.PRODUCTS_IMAGE}" alt="{$module_data.PRODUCTS_NAME}{if $module_data.PRODUCTS_SHORT_DESCRIPTION != ''} ({$module_data.PRODUCTS_SHORT_DESCRIPTION}){/if}" />
  </noscript>
</a>
 

[jannemann]

Hallo Thomas,

deinen Code habe ich in deinem 1. Beitrag aktualisiert.
Wenn du noch Änderungswünsche hast, lass es mich bitte wissen.

Schöne Grüße,
Jan