LazyLoad (Bilder abgeschnitten)

FIL11

Lt. Commander
Dabei seit
Sep. 2007
Beiträge
1.042
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?
 

FIL11

Lt. Commander
Ersteller dieses Themas
Dabei seit
Sep. 2007
Beiträge
1.042
Ja. Mit reinem Demo-Content. [gelöscht]
 
Zuletzt bearbeitet:

FIL11

Lt. Commander
Ersteller dieses Themas
Dabei seit
Sep. 2007
Beiträge
1.042
Ich hatte auch versucht, LazySizes statt LazyLoad per zusätzlichem Plugin zu nutzen. Da kommt es zum gleichem Verhalten. Hm.
 

Sparta8

Lieutenant
Dabei seit
Juli 2008
Beiträge
949
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

Ensign
Dabei seit
Feb. 2003
Beiträge
236
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

Lt. Commander
Ersteller dieses Themas
Dabei seit
Sep. 2007
Beiträge
1.042
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

Ensign
Dabei seit
Feb. 2003
Beiträge
236
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

Lt. Commander
Ersteller dieses Themas
Dabei seit
Sep. 2007
Beiträge
1.042
Habe das Problem zusammen mit dem Template Designer behoben. :)
 
Top