Question

我不太喜欢 lazyload-rails ＆＃39; gem，但它似乎是唯一可用的功能。我在turbolinks加载方法调用中包装了lazyload方法本身。照片本身正在淡入淡出，但占位符不会隐藏在容器中，只会在加载图像时显示。如果没有图片或加载到服务器后端，如何隐藏占位符图像？

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 %>

LazyLoad没有隐藏占位符img Rails 5

1 个答案: