LazyLoad不隱藏佔位符img Rails 5

我不太喜歡'lazyload-rails'gem，但它似乎是唯一可用於此功能的gem。我在一個turbolinks加載方法調用中封裝了lazyload方法本身。照片本身正在淡入淡出，但佔位符並未隱藏在容器中，只在圖像加載時顯示。當沒有圖片存在或在服務器後端加載時，如何隱藏佔位符圖像？LazyLoad不隱藏佔位符img Rails 5

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>

來源

2017-08-21 Johnny C

我明白，這種做法是不是最大的，但一個簡單的if語句檢查圖像是否存在，何時不存在。佔位符自動消失。

更新HTML

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

來源

2017-08-21 22:01:23

LazyLoad不隱藏佔位符img Rails 5

回答

相關問題