我不太喜欢“lazyload-rails”gem,但它似乎是唯一具有此功能的 gem 。我将lazyload 方法本身包装在turbolinks 加载方法调用中。照片本身正确淡入,但占位符并未隐藏在容器中,仅在加载图像时才显示。当服务器后端没有图片或没有加载图片时,如何隐藏占位符图像?
HTML
<div class="container-fluid">
<div class="row">
<div class="col-md-12 post-image">
<%= image_tag post.post_photo.feed_preview, class: 'd-flex align-self-start mr-3 img-fluid rounded', lazy: true %>
<span class="badge badge-default"><%= fa_icon 'clock-o' %>
<small><%= time_ago_in_words(post.created_at) %> ago</small></span>
</div>
</div>
</div>
lazyload.rb
Lazyload::Rails.configure do |config|
config.placeholder = "/placeholder70x70.gif"
end
JavaScript
<script type="text/javascript">
$(document).on('turbolinks:load', function () {
$("img").lazyload({
effect : "fadeIn"
});
});
</script>
最佳答案
我知道这种方法不是最好的,但一个简单的 if 语句会检查图像是否存在以及何时不存在。占位符自动消失。
更新了 html
<% if post.post_photo.present? %>
<%= image_tag post.post_photo.feed_preview %>
<% else %>
<% end %>
关于javascript - LazyLoad 不隐藏占位符 img Rails 5,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45804035/