画像の遅延読み込み

数ヶ月前、@Johani が画像の遅延読み込みを実現する優れた テーマコンポーネント を公開しました。これにより、画像はページ上に表示された瞬間にすべて読み込まれるのではなく、ユーザーのスクロールに合わせて表示領域に入ってきた時点で読み込まれるようになります。

画像が多数含まれるトピックが多いフォーラムでは、特に帯域幅が限られた接続環境のユーザーにとって、この機能は非常に有用です。

Discourse の技術的な詳細に詳しい方なら、「@eviltrout さん、Discourse はもともとある程度これを実装しているのでは?」と疑問に思うかもしれません。無限スクロールを実装しており、ユーザーがスクロールすると投稿がメモリにストリーミングされ、不要なものは解放されますよね。その通りです!ただし、Discourse は一般的に「チャンク単位」で処理しており、画像掲示板のような場合、単一の投稿に数十枚もの高解像度画像が含まれることもあります。まだ表示されていない画像をすべて一度に読み込む必要があるでしょうか?

Discourse の最新ビルドでは、大きな画像の遅延読み込みが標準でサポートされるようになりました。追加のコンポーネントやプラグインは不要です。非常に速くスクロールすると、プレースホルダーとして低解像度のぼやけた画像が表示されるのを確認できます。見た目は以下のようになります:

image

技術的な詳細:10x10 ピクセル、32 色の非常に小さな画像を生成し、これをデータ URI として投稿に埋め込んでいます。ブラウザがこの画像を正しいサイズに拡大表示します。これにより、画像データ自体は約 300 バイト程度に抑えられます。

まもなく、正しい画像に置き換わります:

今後しばらくはこの機能を微調整していく予定です。もしご意見やご指摘があれば、ぜひお知らせください!

「いいね!」 50

Should improve page loading performance nicely, especially on slow connections. Thanks for this improvement!

「いいね!」 8

Awesome!

This is why I love Discourse - you keep adding stuff I didn’t think we needed! :+1:t3:

「いいね!」 11

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.

「いいね!」 14

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.

「いいね!」 2

Probably fine, but to cover animated GIFs which are still quite common I would relax that to something like 200×200.

「いいね!」 3

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

「いいね!」 5

I vote for 150×150 then, as we definitely want to steer clear of anything remotely emoji-like in size…

「いいね!」 4

I mean, previously, image greater than 4MB isn’t loaded properly (using mobile to access)

-edit-

「いいね!」 1

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.

「いいね!」 7

I just want to say thank you for including this feature.

「いいね!」 6

Here’s some improvements:

「いいね!」 10

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?

「いいね!」 1
「いいね!」 9

It’s not just about your bandwidth, it’s about unnecessarily loading the server/CDN.

As @falco linked above, the trend is towards more just-in-time asset delivery.

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.

「いいね!」 1

It’s done with Javascript right now. There is no way to adjust it currently, but we might consider it in the future based on feedback.

「いいね!」 4

最近、lazy load に関する問題が頻発しており、少なくとも毎日このエラーが発生しています。再現は難しいですが、発生時にトラブルシューティングを行うための方法はありますでしょうか?ログに関連する内容は以下の通りです。

Uncaught [object Object]
Url: https://community.naturephotographers.network/assets/ember_jquery-57d09ec67e9e407d9b0d42aa1fefd1a470c45310d953b07793a3ca8adc6ec599.js
Line: 1
Column: 267440
Window Location: https://community.naturephotographers.network/t/twin-cuties/12785

「いいね!」 1

テーマとプラグインを無効にしても同じ問題が発生しますか?セーフモードで試しましたか?

「いいね!」 1

再現が非常に困難です。セーフモードで起動し、動作しないトピックにたどり着くまで、約30のトピックを閲覧しました。今回はログに関連するエラーは記録されていません。各プラグインをテストしてダウンタイムを発生させたくないため、どこかにヒントがあることを期待しています。原因を特定する手がかりがあれば幸いです。ありがとうございました、ジェフ。

「いいね!」 3