javascript - LazyLoad 不隐藏占位符 img Rails 5

Question

我不太喜欢“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>

Answer 1

我知道这种方法不是最好的，但一个简单的 if 语句会检查图像是否存在以及何时不存在。占位符自动消失。

更新了 html

<% if post.post_photo.present? %>
<%= image_tag post.post_photo.feed_preview %>
<% else %>
<% end %>