有哪些技巧和想法可以提高无限滚动画廊网站（如 Pinterest）的性能？

在这里，我总是会使用现成的解决方案。从头开始是一项相当复杂的工作，需要涵盖许多问题（加载速度、响应能力、缩略图大小、浏览器/设备兼容性、ajax ……）。一旦我需要将它集成到已经开发的、高度定制的 wordpress 主题中，并且没有一个插件适合（因为它们通常不对代码定制开放）。结果很好，但对于这样的工作，时间框架和最终成本是不成比例的。
如果您的网站在 WordPress 中，请尝试 Infinite Masonry Gallery
我没有尝试这个特定的插件，但如果他们很快发布 wp 5+ 更新，它应该可以正常工作。
*
如果您只想修复现有解决方案，请考虑：
如果您加载的图像大小足以容纳缩略图包装 div（或全尺寸/更大的图像）。您可能需要让代码检测屏幕大小并根据该大小提取正确的缩略图
分块加载画廊，而不是一次加载所有图像。最好的情况是您最初加载一个完整的可见屏幕，然后只加载底部屏幕线下的一行。它给人的印象是所有内容都已加载，但实际上会为下一行加载留出时间。滚动加载下一行。
在大屏幕上总是欢迎非全宽容器（并且看起来不错）。它将大大减少每个可见屏幕加载的缩略图数量（并将提高页面加载速度）
使用一些 loader.gif 和渐进式 jpeg 图像来抓住用户的焦点，而其余的则加载
如果您的缩略图比例不同（有些是横向的，有些是纵向的，有不同的高度），那么这项工作就更难了。您将需要编写一个非常好的 jQuery 代码，它将检测所有行中最后一个图像的最高图像底部位置，并在那里打印下一个图像（不是普通的从左到右的方式）。
您可能需要将图像保存在单独的子域中，以使它们不等待加载其他文件（所有 css、js 等）。
如果我错过了给出正确答案，请说明问题。