Question

我正在开发一个rails应用程序。搜索页面显示所有带有从亚马逊s3获取的图像的列表。现在面临的问题是我的布局变得混乱，直到所有图像完全加载。所以我放了一个占位符图像，现在问题是当从s3加载实际图像时如何替换它。我们怎么知道图像是完全加载的并相应地改变图像？提前谢谢！

Answer 1

查看lazysizes或热门词汇＆＃39;延迟加载＆＃39;。它完全符合您的需要。

更新

检查demo，例如标题为＆＃39;图像采用LQIP技术的部分＆＃39;。

所以基本上你的图片标签现在应该是

position:absolute;
width:256px;
height:256px;
top:50%;
left:50%;
margin: -128px 0 0 -128px;
z-index:1000;

此图片代码现在将显示占位符图片。一旦该图像滚动到视图中并且加载了aws文件，库的javascript文件将自动加载aws图像。