LazyLoad (Bilder abgeschnitten)

[FIL11]

Hi!

Ich brauche eigentlich nur einen Denkanstoß für die Problemsuche. Hoffe auf einen Quick-Fix.

Situation:

• WordPress Installation
• Theme mit horizontalem Scrollen(!)
• WP Rocket (Caching-Plugin) mit LazyLoad-Funktion

Wenn ich die LazyLoad-Funktion deaktiviere, funktioniert alles bestens. Bloß ohne LazyLoad.
Wenn ich die LazyLoad-Funktion aktiviere, werden die Bilder nacheinander geladen, bis sie irgendwann "abgeschnitten" sind. Wenn ich das Fenster dann (ohne Reload) in der Größe ändere, wird plötzlich alles richtig angezeigt. Sprich, geladen wurde der Inhalt offenbar, aber ich kann nicht "hinscrollen".

Problem in allen bisher getesteten Browsern (Firefox; Edge)

Vertikaler Scroll funktioniert.

Hat jemand eine Idee?

 

[Sparta8]

Ist das Projekt online? Link?

 

[FIL11]

Ja. Mit reinem Demo-Content. [gelöscht]

 

[FIL11]

Ich hatte auch versucht, LazySizes statt LazyLoad per zusätzlichem Plugin zu nutzen. Da kommt es zum gleichem Verhalten. Hm.

 

[Sparta8]

Irgendwo im Template ist eine JS Funktion die beim resize-Event alles an die richtige Position bzw. Größe anpasst. Schau mal ob du diese Funktion beim Seitenaufruf auch einmalig laufen lassen kannst.

OT: Wer wird die Zielgruppe der fertigen Seite?

 

[mastaqz]

Noch eine Anmerkung:
Aus Usability Sicht muss unbedingt noch ein visueller Cue eingebaut werden, der dem User signalisiert, dass ein horizontaler Key Press Scroll möglich ist. Am besten mit Mouse Scroll. So wie es auf den Unterseiten stattfindet mit dem Click Scroll reicht auch, wobei dort die Anordnung etwas verwirrend ist, da der Pfeil nach links auf der rechten Seite ist.
schiff2 und blog_img_04 am besten auch noch durch ein Tool wie tinypng durchhauen.

 

[FIL11]

Irgendwo im Template ist eine JS Funktion die beim resize-Event alles an die richtige Position bzw. Größe anpasst.

Ich werde mir das näher ansehen. Vielleicht findet sich was. Danke.
Die Seite wird Portfolio und Anlaufstelle für Kunden (Fotografie).

[…] ein visueller Cue eingebaut werden, der dem User signalisiert, dass ein horizontaler Key Press Scroll möglich ist. Am besten mit Mouse Scroll.

Guter Punkt. Inwiefern "mit" Maus-Scroll?
Die Bilder verkleinere ich mit Imagify. Da kann ich sicher noch nachhelfen. Zudem arbeite ich noch an den passenden Einstellungen für Responsive Images. Muss mir das bzgl scrset und sizes noch autodidaktisch aneignen. Klappt jetzt schon so halbwegs, aber die Parameter sind noch unüberlegt.

 

[mastaqz]

Guter Punkt. Inwiefern "mit" Maus-Scroll?
Die Bilder verkleinere ich mit Imagify. Da kann ich sicher noch nachhelfen. Zudem arbeite ich noch an den passenden Einstellungen für Responsive Images. Muss mir das bzgl scrset und sizes noch autodidaktisch aneignen. Klappt jetzt schon so halbwegs, aber die Parameter sind noch unüberlegt.

Dass er automatisch nach links oder rechts scrollt, wenn man mit der Maus an den Rand kommt, also ohne Klick.
Kein Muss, aber gerade im Gesamtbild dieses Layouts finde ich es passend.

srcset wäre natürlich top. Ich bekomme bspw. das Bild mit der jungen Frau in 1024x1024 geschickt, dabei ist mein Viewport im Browser nur 815px hoch. Aber bei einem Kundenstamm mit guter Internetanbindung nicht unbedingt ein großes Problem.

 

[FIL11]

Habe das Problem zusammen mit dem Template Designer behoben.