为表情符号添加延迟加载

Profile pictures and image elements in posts get lazyloaded by having the attribute loading="lazy" set.
Emojis are missing out on this. :sloth:

<img src="https://emoji.discourse-cdn.com/twitter/sloth.png?v=12" title=":sloth:" class="emoji" alt=":sloth:">

I could not find the location in the sources where the emoji tags are generated.
Are emojis “baked” into the posts?

您能详细说明一下为什么添加了硬编码的宽度和高度吗?为什么我们的 CSS 解决方案在这里不够好?

Personally I think it is like a good manner to always add width and height attributes to img elements on point where the img-element is generated. That is the place where I might know for sure which exact image-file I’m putting in. CSS is far away from the actual image-file.

On top the browsers use this extra info about the image size to calculate aspect-ratio before loading the image file - and before CSS parsing.

For this case the emojis are used in many different places - and sometimes defining sizes via CSS will be skipped accidentally.
E.g. see crawler view of this very same topic on PageSpeed

我个人认为,在生成 img 元素时,始终为其添加 width 和 height 属性是一种良好的习惯。因为那是唯一能确切知道我将放入哪个图像文件的地方。CSS 距离实际的图像文件很远。

此外,浏览器在加载图像文件和解析 CSS 之前,会利用关于图像大小的这些额外信息来计算 aspect-ratio。

在这种情况下,表情符号在许多不同的地方使用——有时会意外地跳过通过 CSS 定义大小。
例如,请参阅此关于 PageSpeed 的相同主题的爬虫视图。

明白了,所以浏览器使用这个来确定纵横比,这使得人们在 CSS 方面更加灵活(并限制了围绕 CSS 的阻塞)。对我来说似乎不错,不过确实让我们的 HTML 变得有些冗长。

此 PR 已合并,感谢 @rrit 的贡献!