砌体 + img srcset 的问题

Question

我正在使用 David DeSandro 的 Masonry 4.2.2（当前版本），它与 WordPress 捆绑在一起。

当我将具有“srcset”和“sizes”的图像放入其中时，它会加载正确的尺寸，但也是最大版本 -> 大量浪费的数据。在 Firefox 和 Chrome 中都会发生。

我制作了一组简单的两个测试页面（= 删除了几乎所有其他内容），因此比较该行为很简单：

1) https://www.pastel.cz/temp/test_gallery_simple.php

砌体初始化注释掉了，在 Inspector 中我可以确认只加载了单一尺寸。对于我的浏览器窗口，传输了大约 2 MB。

2) https://www.pastel.cz/temp/test_gallery_masonry.php

一切都相同，只是这次 Masonry 在最后正确初始化。加载了很多新的图像版本，对我来说已经超过 7 MB 的下载数据。

有没有办法让我在这里做错了什么？还是我应该将其报告为错误？感谢您的任何指点。

Answer 1

已知问题

我想我找到了答案，这是 imagesLoaded 的一个已知错误 - 一个与 masonry 一起使用以对延迟加载的图像做出反应的库。该错误从 2015 年开始开放，可能没有多少人注意到这种行为:)

https://github.com/desandro/imagesloaded/issues/175

解决方法

无论如何，由于我预先在 HTML 中指定了图像大小，因此可以在初始化阶段完全构建网格而无需加载实际图像，看来我可以禁用 imagesLoaded 库并且问题消失了。