jquery - 放置占位符图像,直到加载相关图像

标签 jquery ruby-on-rails image

我正在开发一个 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/

相关文章:

javascript - XML Ajax 请求中请求的资源上不存在 'Access-Control-Allow-Origin' header

php - Yii2 图像维度验证

java - 使用 BufferedImages 获取图像每个像素的颜色

ruby-on-rails - Heroku 应用程序似乎从错误的 Git 存储库/分支中提取

mysql - 数据库模型和迁移说明

ios - GMImagePicker 导致应用程序崩溃

不刷新 Jquery 媒体查询不适用

JavaScript 返回克隆不是 countMembers 的函数

javascript - 在 jQuery 插件的属性中未定义对对象方法的引用

iphone - 设计 Omniauth 和 Iphone/Android 应用程序