我正在开发一个 Rails 应用程序。搜索页面显示所有带有从亚马逊 s3 获取的图像的列表。现在面临的问题是我的布局变得困惑,直到所有图像完全加载。所以我放置了一个占位符图像,现在的问题是当实际图像从 s3 加载时如何替换它..我们如何知道图像已完全加载并相应地更改图像?预先感谢您!
最佳答案
查看lazysizes或者流行语“延迟加载”。我相信它正是您所需要的。
更新
检查demo ,例如标题为“使用 LQIP 技术的图像”的部分。
所以基本上你的图像标签现在应该是
<img src="placeholder-image.jpg" data-src="aws-image.jpg" class="lazyload" />
此图像标记现在将显示占位符图像。一旦该图像滚动到 View 中并加载 aws 文件,该库的 javascript 文件将自动加载 aws 图像。
关于jquery - 放置占位符图像,直到加载相关图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34455584/