图片懒加载

几个月前,@Johani 发布了一个优秀的 主题组件,用于实现图片的懒加载。这意味着图片仅在滚动到可视区域时才会加载,而不是在它们出现在页面任何位置时立即加载,即使用户尚未看到它们。

这对于包含大量图片的论坛主题来说非常有用,尤其适合网络连接带宽有限的用户。

如果您了解 Discourse 的一些技术细节,可能会问:嘿,@eviltrout,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 个赞

我最近越来越频繁地遇到“加载更多”功能的问题,至少每天都能看到一次。这个问题很难复现,但我想知道当它发生时,有没有什么方法可以排查?日志中唯一相关的信息如下:

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 个主题后,才终于遇到一个无法工作的。这次日志中没有相关错误。我试图避免逐个测试插件导致的停机时间,因此希望其他地方可能有线索,帮助确定罪魁祸首。谢谢,Jeff。

3 个赞