# 图片懒加载
**URL:** https://meta.discourse.org/t/lazy-loading-images/104690
**Category:** Announcements
**Tags:** new-feature
**Created:** [2018年十二月19日 18:08 UTC](https://meta.discourse.org/t/lazy-loading-images/104690 "2018-12-19T18:08:06Z")
**Posts on this page:** 20
**Page:** 1
### Author:  [@eviltrout](https://meta.discourse.org/u/eviltrout)
#### Post date: [2018年十二月19日 18:08 UTC](https://meta.discourse.org/t/lazy-loading-images/104690/1 "2018-12-19T18:08:06Z")
几个月前，@Johani 发布了一个优秀的 [主题组件](https://meta.discourse.org/t/lazyload-images/90472)，用于实现图片的懒加载。这意味着图片仅在 **滚动到可视区域时** 才会加载，而不是在它们出现在页面任何位置时立即加载，即使用户尚未看到它们。
这对于包含大量图片的论坛主题来说非常有用，尤其适合网络连接带宽有限的用户。
> 如果您了解 Discourse 的一些技术细节，可能会问：嘿，@eviltrout，Discourse 不是已经某种程度上实现了这个功能吗？你们确实实现了无限滚动，帖子会随着用户滚动动态地流入和流出内存。没错！但我们通常是按“块”来处理的，而在某些图片版中，单个帖子可能包含数十张大型图片。既然这些图片尚未可见，为什么要一次性全部加载呢？
在 Discourse 的最新构建版本中， **我们现在已对大型图片实现懒加载** ，无需额外的组件或插件。如果您滚动得_非常快_，会先看到一个模糊的低分辨率图片作为占位符。效果大致如下：
技术细节：我们生成一个非常非常小的 10x10 像素、32 色图片，并将其作为数据 URI 存储在帖子中，浏览器会将其缩放到正确尺寸——这最终大小约为 300 字节左右。
随后，它会被正确的图片替换：
我们将在接下来的短时间内继续优化该功能，如果您有任何反馈或建议，欢迎提供！
---
### Author:  [@ChrisBeach](https://meta.discourse.org/u/ChrisBeach)
#### Post date: [2018年十二月19日 18:28 UTC](https://meta.discourse.org/t/lazy-loading-images/104690/2 "2018-12-19T18:28:17Z")
Should improve page loading performance nicely, especially on slow connections. Thanks for this improvement!
---
### Author:  [@AstonJ](https://meta.discourse.org/u/AstonJ)
#### Post date: [2018年十二月19日 18:36 UTC](https://meta.discourse.org/t/lazy-loading-images/104690/3 "2018-12-19T18:36:51Z")
Awesome!
This is why I love Discourse - you keep adding stuff I didn’t think we needed! 👍🏼
---
### Author:  [@eviltrout](https://meta.discourse.org/u/eviltrout)
#### Post date: [2018年十二月20日 22:03 UTC](https://meta.discourse.org/t/lazy-loading-images/104690/4 "2018-12-20T22:03:15Z")
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.
---
### Author:  [@Azareal](https://meta.discourse.org/u/Azareal)
#### Post date: [2018年十二月21日 01:51 UTC](https://meta.discourse.org/t/lazy-loading-images/104690/5 "2018-12-21T01:51:18Z")
[How web bloat impacts users with slow connections](https://danluu.com/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.
---
### Author:  [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [2018年十二月21日 01:58 UTC](https://meta.discourse.org/t/lazy-loading-images/104690/6 "2018-12-21T01:58:34Z")
> [@eviltrout](#):
>
> 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.
Probably fine, but to cover animated GIFs which are still quite common I would relax that to something like 200×200.
---
### Author:  [@sam](https://meta.discourse.org/u/sam)
#### Post date: [2018年十二月21日 04:53 UTC](https://meta.discourse.org/t/lazy-loading-images/104690/7 "2018-12-21T04:53:13Z")
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
---
### Author:  [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [2018年十二月21日 06:04 UTC](https://meta.discourse.org/t/lazy-loading-images/104690/8 "2018-12-21T06:04:19Z")
I vote for 150×150 then, as we definitely want to steer clear of anything remotely emoji-like in size..
---
### Author:  [@OrcaFrost](https://meta.discourse.org/u/OrcaFrost)
#### Post date: [2018年十二月21日 08:08 UTC](https://meta.discourse.org/t/lazy-loading-images/104690/11 "2018-12-21T08:08:43Z")
I mean, previously, image greater than 4MB isn’t loaded properly (using mobile to access)
-edit-
---
### Author:  [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [2018年十二月21日 08:22 UTC](https://meta.discourse.org/t/lazy-loading-images/104690/12 "2018-12-21T08:22:18Z")
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.
---
### Author:  [@meetdilip](https://meta.discourse.org/u/meetdilip)
#### Post date: [2018年十二月21日 10:18 UTC](https://meta.discourse.org/t/lazy-loading-images/104690/13 "2018-12-21T10:18:07Z")
I just want to say thank you for including this feature.
---
### Author:  [@eviltrout](https://meta.discourse.org/u/eviltrout)
#### Post date: [2018年十二月21日 16:32 UTC](https://meta.discourse.org/t/lazy-loading-images/104690/14 "2018-12-21T16:32:01Z")
Here’s some improvements:
[https://github.com/discourse/discourse/commit/0e710dc573a02cdfb05f8c88d3024aacbbb81872](https://github.com/discourse/discourse/commit/0e710dc573a02cdfb05f8c88d3024aacbbb81872)
---
### Author:  [@Shawn\_Kirsch](https://meta.discourse.org/u/Shawn_Kirsch)
#### Post date: [2019年一月10日 19:31 UTC](https://meta.discourse.org/t/lazy-loading-images/104690/15 "2019-01-10T19:31:16Z")
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?
---
### Author:  [@Falco](https://meta.discourse.org/u/Falco)
#### Post date: [2019年四月7日 14:13 UTC](https://meta.discourse.org/t/lazy-loading-images/104690/16 "2019-04-07T14:13:32Z")
[https://twitter.com/addyosmani/status/1114777583302799360?s=17](https://twitter.com/addyosmani/status/1114777583302799360?s=17)
---
### Author:  [@Stephen](https://meta.discourse.org/u/Stephen)
#### Post date: [2019年四月7日 20:31 UTC](https://meta.discourse.org/t/lazy-loading-images/104690/17 "2019-04-07T20:31:50Z")
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.
---
### Author:  [@ckshen](https://meta.discourse.org/u/ckshen)
#### Post date: [2019年五月22日 18:32 UTC](https://meta.discourse.org/t/lazy-loading-images/104690/18 "2019-05-22T18:32:45Z")
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.
---
### Author:  [@eviltrout](https://meta.discourse.org/u/eviltrout)
#### Post date: [2019年五月23日 14:53 UTC](https://meta.discourse.org/t/lazy-loading-images/104690/19 "2019-05-23T14:53:42Z")
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.
---
### Author:  [@davidkingham](https://meta.discourse.org/u/davidkingham)
#### Post date: [2020年四月10日 14:35 UTC](https://meta.discourse.org/t/lazy-loading-images/104690/23 "2020-04-10T14:35:38Z")
我最近越来越频繁地遇到“加载更多”功能的问题，至少每天都能看到一次。这个问题很难复现，但我想知道当它发生时，有没有什么方法可以排查？日志中唯一相关的信息如下：
```plaintext
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
```
---
### Author:  [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [2020年四月10日 18:47 UTC](https://meta.discourse.org/t/lazy-loading-images/104690/24 "2020-04-10T18:47:25Z")
在禁用主题和插件的情况下，您是否也遇到相同的问题？您是否尝试过安全模式？
---
### Author:  [@davidkingham](https://meta.discourse.org/u/davidkingham)
#### Post date: [2020年四月10日 20:04 UTC](https://meta.discourse.org/t/lazy-loading-images/104690/25 "2020-04-10T20:04:22Z")
这很难复现，我进入了安全模式，浏览了大约 30 个主题后，才终于遇到一个无法工作的。这次日志中没有相关错误。我试图避免逐个测试插件导致的停机时间，因此希望其他地方可能有线索，帮助确定罪魁祸首。谢谢，Jeff。
[下一頁](https://meta.discourse.org/t/lazy-loading-images/104690.md?page=2)