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/unveilUnveil 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:
<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):
<script src="/templates/YOUR_TEMPLATE/javascript/jquery.unveil.min.js"></script>
Aktivierungscode:
<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:
.unveil {
display: none;
}
javascript:
$(document).ready(function() {
$(".unveil").show();
$(".unveil").unveil();
});
mein product-listing-code:
<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