Neu Artikeldetailseite Slick "gallery" wird erst bei "img" hover initialisiert

Qwartz

Sehr aktives Mitglied
29. August 2012
388
60
Bayern
Man kann den Fehler auch im Demo reproduzieren: https://demo.jtl-shop.blackbike-forest.de/BMX-Rad-Insular-Force
Das Layout verändert sich nach dem ersten hovern über das Bild oder die Thumbnails, sieht so aus als würde erst dann ".slick-lazy" entfernt und ".slick-initialized .slick-slider" gesetzt.
Auch die "slick-list" wird erst beim hovern erstellt.
In der Source sieht das ganze beim laden der Seite so aus:

slick-onload.png

Nach dem Hovern:

slick-onhover.png

Bevor ich mich nun im Code zu Tode suche, gibts da schon nen "fix / workaround" ?
 

Qwartz

Sehr aktives Mitglied
29. August 2012
388
60
Bayern
Ok, also doch wieder selbst gesucht, aber evtl. hilft es ja... in der jtl.evo.js ziemlich am Anfang eingefügt
JavaScript:
self.initSlick($('#gallery_wrapper .slick-lazy:not(.slick-initialized)'), 'gallery');
 
Zuletzt bearbeitet:

MHillmann

Moderator
Mitarbeiter
11. Oktober 2018
326
103
Hallo @Qwartz

das ist kein Bug sondern verbessert den initial page load, da die Slick Initalisierung bei Seitenaufruf zu einem repaint der Seite führt, bzw. sonst auch bisl kostet.
Das kleine Zucken liegt daran, dass Slick explizit Größen setzt anstatt mit pronzentualen Werten zu arbeiten, das macht es schwierig den Slick optisch nachzubilden ohne Slick zu initialisieren.. d.h. es ist auf 1px ungenau was die Layout Verschiebung auslöst..
Wenn dich das Zucken stört, kannst du ihn natürlich auch direkt bei Seitenaufruf laden wie du es machen möchtest, verliert natürlich aber die anderen Vorteile.

Die gleiche Frage gab es übrigens vor kurzem erst hier: https://forum.jtl-software.de/threa...laden-wird-nach-mouseenter-touchstart.148304/

Viele Grüße
Michael
 
  • Gefällt mir
Reaktionen: Qwartz