Il y a quelques mois, @Johani a publié un excellent composant de thème pour charger les images de manière différée (lazy load). Cela signifie que les images ne sont chargées que lorsqu’elles apparaissent dans le champ de vision, plutôt que d’être chargées dès qu’elles apparaissent n’importe où sur la page, même si elles ne sont pas encore visibles pour l’utilisateur.
C’est une excellente fonctionnalité pour les forums où les sujets contiennent de nombreuses images, en particulier pour les utilisateurs ayant des connexions à bande passante limitée.
Si vous connaissez certains détails techniques de Discourse, vous pourriez vous demander : hé @eviltrout, Discourse ne fait-il pas déjà cela en quelque sorte ? Vous utilisez un défilement infini et les messages sont chargés et déchargés de la mémoire au fur et à mesure que l’utilisateur fait défiler la page. Oui, c’est exact ! Mais nous le faisons généralement par « blocs », et sur certains forums d’images, un seul message peut contenir des dizaines de grandes images. Pourquoi les charger toutes en une fois alors qu’elles ne sont pas encore visibles ?
Dans les dernières versions de Discourse, nous chargeons désormais les grandes images de manière différée ; aucun composant ou plugin supplémentaire n’est nécessaire. Si vous faites défiler la page très rapidement, vous verrez une version floue et basse résolution d’une grande image servant d’espace réservé. Cela ressemblera à ceci :
détails techniques : nous générons une image très, très petite de 10x10 pixels avec 32 couleurs et la stockons sous forme d’URI de données dans le message, ce que le navigateur redimensionne à la taille correcte — cela représente environ ~300 octets
Elle sera bientôt remplacée par l’image correcte :
Nous continuerons d’ajuster cette fonctionnalité au cours des prochaines semaines ; n’hésitez donc pas à fournir des commentaires et des remarques si vous en avez !
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.
Je rencontre de plus en plus de problèmes avec le chargement différé récemment ; je vois ce message au moins une fois par jour. C’est difficile à reproduire, mais je me demande s’il y a quelque chose que je puisse faire pour diagnostiquer le problème quand cela se produit ? La seule information pertinente dans les journaux est la suivante :
C’est très difficile à reproduire. Je suis passé en mode sans échec et j’ai dû parcourir une trentaine de sujets avant d’enfin tomber sur celui qui ne fonctionnait pas. Cette fois, aucune erreur connexe dans les journaux. J’essaie d’éviter les temps d’arrêt liés au test de chaque plugin, c’est pourquoi j’espère qu’il y a peut-être des indices ailleurs pour déterminer quel est le coupable. Merci, Jeff.
