Vor ein paar Monaten hat @Johani eine hervorragende Theme-Komponente veröffentlicht, um Bilder per Lazy Loading zu laden. Das bedeutet, dass Bilder erst dann geladen werden, wenn sie durch Scrollen in den sichtbaren Bereich gelangen, anstatt sofort geladen zu werden, sobald sie irgendwo auf der Seite erscheinen – selbst wenn sie für den Nutzer noch nicht sichtbar sind.
Das ist besonders auf Foren mit Themen, die viele Bilder enthalten, eine großartige Funktion, insbesondere für Nutzer mit Verbindungen mit begrenzter Bandbreite.
Wenn du mit einigen der technischen Details von Discourse vertraut bist, fragst du dich vielleicht: Hey @eviltrout, macht Discourse das nicht schon irgendwie? Ihr nutzt unendliches Scrollen und Beiträge werden beim Scrollen des Nutzers in den Speicher geladen und wieder entladen. Ja, das stimmt! Aber wir tun dies meist in „Chunks", und auf einigen Bildforen kann ein einzelner Beitrag Dutzende großer Bilder enthalten. Warum sollte man sie alle auf einmal laden, wenn sie noch nicht sichtbar sind?
In den neuesten Builds von Discourse laden wir nun automatisch große Bilder per Lazy Loading – es sind keine zusätzlichen Komponenten oder Plugins erforderlich. Wenn du wirklich schnell scrollst, siehst du zunächst eine unscharfe, niedrig aufgelöste Version eines großen Bildes als Platzhalter. Das sieht dann ungefähr so aus:
Technische Details: Wir generieren ein sehr, sehr kleines 10x10-Bild mit 32 Farben und speichern es als Data-URI im Beitrag. Der Browser skaliert es dann auf die richtige Größe – das ergibt insgesamt etwa ~300 Byte.
One thing I’m looking into is applying this to non-lightboxed images, such as those included via oneboxing links.
One issue is it’s a little tricky to know when to apply the logic, since we don’t know the filesize of the destination image. Originally my plan was to append the filesize of images, but it turns out that is quite tricky since we don’t always have a downloaded copy of the image available.
I think I’ll have to come up with a magic width x height, maybe 300x300px or so, and if the image has dimensions larger than that it’ll be lazy loaded. We do have those dimensions available regardless of onebox or upload.
Web bloat I find this article to be a good one on the subject of slow connections, do bear in mind that it has a very minimalistic theme, so don’t judge it by it’s cover so to speak. It might not quite be applicable here, but it’s always good to keep in mind.
I sometimes wish there were ways with Web APIs to detect if someone is on a connection where they pay a lot for bandwidth or one that’s slow.
Yeah I am not sure what the downside will be of going all the way down to 50x50, as long as we do not hit emojis it should be good. Even at 50x50 we may still save 25x if you don’t end up looking at the image
That is completely unrelated. Max allowed image size is controlled in site settings. We already lightbox and thumbnail all images that are posted above a certain size. This is about topics with dozens or hundreds of images in them, not the size of any single image.
Man, I thought I was going crazy. This feature is great for low bandwidth, but now i’m seeing this lazy loading all over the place when I am scrolling our forum. I have so much bandwidth and I’m on a computer. Maybe there should be some sort of buffer around areas you can’t see that load right before you scroll to them? Maybe only for mobile?
Is there anyway that the admin can still play with CSS to modify the lazy loading behavior? The somewhat unintended consequence is that some users are now saying that pictures load on demand more slowly compared to before. I was wondering if its possible to modify the CSS such that instead of either loading all pictures in the next e.g. 20 posts (prior behavior) or pictures only in the current post (current behavior), that we do something in the middle, e.g. load pictures in the next e.g. 3-5 posts.
I’ve been having issues with lazy load more and more lately, I see this at least once a day. It is hard repro, but I’m curious if there is anything I can do to troubleshoot this when it happens? The only thing related in the logs is this:
It is very hard to reproduce, I went into safe mode and had to browse through 30 or so topics before finally hitting one that didn’t work. No related errors in the logs this time. I’m trying to avoid the downtime of testing each plugin, that’s why I’m hoping there may be some hints elsewhere to determine what the culprit may be. Thanks Jeff.
