Neu Lazy-Load mobil deaktivieren

[xadoX]

Hallo zusammen,

wir möchten gerne das Lazy-Load mobil abstellen, weil wir das als sehr störend empfinden.

Wenn man in einer Shop Kategorie ist und auf dem Handy nach unten scrollt, so läd der Container Wrapper teilweise mit zu großen Abständen nach oben und unten. Erst beim weiteren Scrollen wird der Abstand zwischen den Produkten kleiner. Bild 1 großer Abstand Bild 2 kleiner Abstand Das nächste Problem ist nun, dass wenn man nur etwas nach oben scrollt, die ganze Seite viel weiter nach oben springt. Man ist dann plötzlich bei Produkten, die deutlich weiter oben in der Liste waren. Das Problem ist auch im JTL Demo Shop in der Fashion Kategorie nachstellbar. Dort allerdings nicht so krass, weil es maximal 5 artikel pro Kategorie gibt. In unserem Shop ist es mobil deutlich zu erkennen https://www.sportdeal24.de/sportausruestung

Der JTL Support hat mir dazu folgendes geschrieben

Es handelt sich um einen Nebeneffekt des "LazyLoadings".
Die Bilder, die nicht im sichtbaren Bereich liegen, werden initial nicht
geladen, um Bandbreite zu sparen und die Requests erst bei Bedarf an den
Server zu senden, wenn die Bilder im sichtbaren Bereich liegen.

Dabei wird eine "Imagebox", bei welcher das Bild noch nicht geladen wurde, mit
einer initialen Höhe initialisiert, die genauso hoch wie der Container breit
ist.
Das wird konkret durch die CSS-Regel
.image-box:before {
padding-top: 100%;
}
ausgelöst.

Die nachfolgenden Lösungsansätze erfordern alle Templateanpassungen und
CSS-Kenntnisse:
A) Lazy-Loading durch Templateanpassung deaktivieren - die anzupassenden
Codestellen befinden sich im Evo-Template in der Datei snippets/image.tpl.
B) Template anpassen z.B. indem den Containern immer eine fixe Höhe zugewiesen
wird (unabhängig vom Bild geladen/nicht-geladen-Status)

Zu A: Die Datei ist wie folgt aufgebaut

{counter assign=imgcounter print=0}
<div class="image-box">
    <div class="image-content">
        <img alt="{$alt}" title="{$alt}" data-src="{$src}" data-id="{$imgcounter}" />
    </div>
</div>

Was genau müsste hier angepasst werden?

Zu B müsste die item_box.tpl verantwortlich für sein. Allerdings finde ich dort nicht die Stellen loaded/unloaded.

Leider ist das ein sehr unschönes Verhalten, vielleicht hat jemand eine Idee oder es sogar bereits selber schon abgestellt?

 

[martinwolf]

Gerade auf mobilen Geräten ist diese Funktion Goldwert. Andernfalls werden ja sämtliche Bilder bereits im Vorfeld geladen obwohl diese vielleicht niemals vom User betrachtet werden. Stichwort mobiles Datenvolumen und Ladezeiten.

 

[xadoX]

Gerade auf mobilen Geräten ist diese Funktion Goldwert. Andernfalls werden ja sämtliche Bilder bereits im Vorfeld geladen obwohl diese vielleicht niemals vom User betrachtet werden. Stichwort mobiles Datenvolumen und Ladezeiten.

Grundsätzlich stimme ich dir da zu. Die Funktion an sich will ich aber nicht abstellen (also das Laden der Bilder, sobald sie in den Sichtbereich kommen) Bei uns ist es aktuell aber so, dass sobald man runter und wieder hochscrollt, er an irgendeine Stelle springt, die er nachträglich geladen hat und man wundert sich, wie man jetzt da hin kam.

Hier unsere Seite: www.sportdeal24.de/sportbekleidung

Auch die Größe der Artikelbox wird immer nachträglich erst geladen, obwohl die Bilder immer das gleiche Format haben und somit die Größe der Box bekannt sein dürfte.

Im Vergleich die Seite von www.gartentraum.de/gartendekoration

Dort tritt dieser Effekt nicht auf, obwohl die Bilder auch erst geladen werden, sobald sie ins Sichtfeld kommen. Die Artikelbox hat aber immer eine fixe Größe.

 

[css-umsetzung]

Puhhhhh das ist bei euch aber extrem nervig.
Habe mir das gerade am Tablet angesehen und man hat das Gefühl das da etwas ist das die seite extrem langsam macht und das dadurch dieses späte Ordnen einsetzt.

Euer Server ist vermutlich auch nicht der schnellste, ich würde da nicht 30 Artikel je SeSei anzeigen lassen.
Ist aber jetzt nur vom Tab aus bewertet ohne das ich die einzelnen zugriffszeiten sehe, am Rechner lässt sich das besser bewerten.