lazy load images using lazyload-rails gem

Gemfile

@@ -70,6 +70,7 @@ gem 'lemmatizer', '~> 0.2.2'
 gem 'mailman', require: false
 # To implement fontawesome v4.7.0
 gem "font-awesome-rails"
+ gem "lazyload-rails"
 
 # To convert html to markdown
 gem 'reverse_markdown'

app/assets/javascripts/application.js

@@ -16,6 +16,7 @@
 //
 //= require jquery
 //= require jquery_ujs
+ //= require jquery.lazyload
 //= require debounce/index.js
 //= require bootstrap/dist/js/bootstrap.bundle.min.js
 //= require bootstrap-3-typeahead/bootstrap3-typeahead.min.js
@@ -60,4 +61,4 @@
 //= require validation.js
 //= require submit_form_ajax.js
 //= require urlMapHash.js
-//= require spam2.js
+//= require spam2.js

app/views/dashboard/_node_default.html.erb

@@ -4,9 +4,9 @@
     <%= render partial: 'dashboard/node_moderate', locals: { node: node } %>
 
     <% if node.main_image %>
-        <a class="img" href="<%= node.path %>"><img src="<%= node.main_image.path(:default) %>" style="width:100%;" /></a>
+        <a class="img" href="<%= node.path %>"><%= image_tag(node.main_image.path(:default), style:'width:100%;') %></a>
     <% elsif node.scraped_image %>
-        <a class="img" href="<%= node.path %>"><img src="<%= node.scraped_image %>" style="width:100%;" /></a>
+        <a class="img" href="<%= node.path %>"><%= image_tag(node.scraped_image, style:'width:100%;') %></a>
     <% end %>
 
     <h4><a href="<%= node.path %>"><%= node.title %></a> <% if node.status == 3 %><span style="font-size: small;" class="badge badge-success">Draft</span><% end %></h4>
@@ -17,3 +17,9 @@
 
   </div>
 </div>
+
+<script>
+$(function(){
+  $("img").lazyload();
+});
+</script>

app/views/dashboard/_node_question.html.erb

@@ -1,22 +1,28 @@
 <div class="col-lg-6 note-container-question">
   <div class="note note-pane note-question<% if node.status == 4 %> moderated<% end %>">
-    
+
     <div class="header-icon"><i class="fa fa-question-circle"></i> <a href="/q/<%= node.id %>"><i class="fa fa-link"></i></a></div>
 
     <div style="overflow: hidden;">
 
       <%= render partial: 'dashboard/node_moderate', locals: { node: node } %>
- 
+
       <% if node.main_image %>
-        <a class="img" href="<%= node.path(:question) %>"><img src="<%= node.main_image.path(:default) %>" style="width:100%;" /></a>
+        <a class="img" href="<%= node.path(:question) %>"><%= image_tag(node.main_image.path(:default), style:'width:100%;') %></a>
       <% elsif node.scraped_image %>
-        <a class="img" href="<%= node.path %>"><img src="<%= node.scraped_image %>" style="width:100%;" /></a>
+        <a class="img" href="<%= node.path %>"><%= image_tag(node.scraped_image, style:'width:100%;') %></a>
       <% end %>
-  
+
       <h4><a href="<%= node.path(:question) %>"><%= node.title %></a></h4>
 
       <p class="meta"><%= translation('dashboard._node_question.question') %> <%= render partial: "dashboard/node_meta", locals: { node: node } %></p>
 
     </div>
   </div>
 </div>
+
+<script>
+$(function(){
+  $("img").lazyload();
+});
+</script>

app/views/notes/_card.html.erb

@@ -1,8 +1,8 @@
 <div class="card">
   <% if node.main_image %>
-    <a class="card-img-top img" style="overflow: hidden; height:10em;"<% if @widget %>target="_blank"<% end %> href="<%= node.path %>"><img src="<%= node.main_image.path(:default) %>" style="width:100%;"/></a>
+    <a class="card-img-top img" style="overflow: hidden; height:10em;"<% if @widget %>target="_blank"<% end %> href="<%= node.path %>"><%= image_tag(node.main_image.path(:default), style:'width:100%;') %></a>
   <% elsif node.scraped_image %>
-    <a class="card-img-top img" style="overflow: hidden; height:10em;" href="<%= node.path %>"><img src="<%= node.scraped_image %>" style="width:100%;" /></a>
+    <a class="card-img-top img" style="overflow: hidden; height:10em;" href="<%= node.path %>"><%= image_tag(node.scraped_image, style:'width:100%;') %></a>
   <%  else %>
     <a class="imgg" style="height:10em; margin-bottom: 10px;padding: 1rem;">
     <i class="fa fa-picture-o note-not aria-hidden="true" style="color: #ccc; font-size: 6em;"></i>
@@ -66,3 +66,9 @@
     </div>
   </small>
 </div>
+
+<script>
+$(function(){
+  $("img").lazyload();
+});
+</script>

app/views/notes/show.html.erb

@@ -14,8 +14,8 @@
 
   <% if @node.main_image %>
     <a class="main-image" style="max-width:100%;width:800px;" href="<%= @node.main_image.path(:original) %>">
-      <img style="max-height:600px;max-width:100%;" class="rounded d-none d-lg-inline" src="<%= @node.main_image.path(:large) %>" />
-      <img style="width:100%;" class="rounded d-lg-none" src="<%= @node.main_image.path(:large) %>" />
+      <%= image_tag(@node.main_image.path(:large), class:"rounded d-none d-lg-inline", style:'max-height:600px;max-width:100%;') %>
+      <%= image_tag(@node.main_image.path(:large), class:"rounded d-lg-none", style:'width:100%;') %>
     </a>
     <!--<div class="expand"><a onClick="$('.main-image').toggleClass('compressed');"><i class="fa fa-angle-down"></i></a></div>-->
   <% end %>
@@ -138,4 +138,7 @@
   $("#collapse-button").click(function(){
       $(this).remove();
   });
+  $(function(){
+    $("img").lazyload();
+  });
 </script>

app/views/questions/show.html.erb

@@ -1,14 +1,16 @@
 <%= javascript_include_tag('comment_expand') %>
 <%= javascript_include_tag('notes') %>
 <%= javascript_include_tag('textbox_expand') %>
-<script> var comments_length = <%= @node.comments.length %>; </script>
+<script> var comments_length = <%= @node.comments.length %>; $(function(){
+  $("img").lazyload();
+});</script>
 <%= javascript_include_tag('question') %>
 <div class="col-lg-9 note-show question-show">
 
    <% if @node.main_image %>
     <a class="main-image" style="max-width:100%;width:800px;" href="<%= @node.main_image.path(:original) %>">
-      <img style="max-height:600px;" class="rounded d-none d-lg-inline" src="<%= @node.main_image.path(:large) %>" />
-      <img style="width:100%;" class="rounded d-lg-none" src="<%= @node.main_image.path(:large) %>" />
+      <%= image_tag(@node.main_image.path(:large), class:"rounded d-none d-lg-inline", style:'max-height:600px;max-width:100%;') %>
+      <%= image_tag(@node.main_image.path(:large), class:"rounded d-lg-none", style:'width:100%;') %>
     </a>
   <% end %>
 

app/views/wiki/_header.html.erb

@@ -4,7 +4,7 @@
 
 <% if @node.main_image && !@presentation %>
   <a style="margin-bottom:10px;" href="<%= @node.main_image.path(:original) %>">
-    <img style="max-width:100%;max-height:600px;margin-bottom:10px;" class="rounded" src="<%= @node.main_image.path(:large) %>" />
+    <%= image_tag(@node.main_image.path(:large), class:"rounded", style:'max-width:100%;max-height:600px;margin-bottom:10px;') %>
   </a>
 <% end %>
 

app/views/wiki/show.html.erb

@@ -13,7 +13,7 @@
 <% if @presentation && @node.main_image%>
   <div id="main-image-presentation" style="margin-bottom:8px;">
     <a href="<%= @node.main_image.path(:original) %>">
-      <img style="width: 100vw;margin: 0 calc((100% / 2) - 50vw);margin-top: -21px;margin-bottom: 12px;" class="rounded" src="<%= @node.main_image.path(:original) %>" />
+      <%= image_tag(@node.main_image.path(:original), class:"rounded", style:'width: 100vw;margin: 0 calc((100% / 2) - 50vw);margin-top: -21px;margin-bottom: 12px;') %>
     </a>
   </div>
 <% end %>
@@ -64,6 +64,7 @@
 
 <script>
 (function(){
+  $("img").lazyload();
 
   <% if @fancy %>
     $('#content img').addClass('img-rounded');

config/initializers/lazyload.rb

@@ -0,0 +1,9 @@
+Lazyload::Rails.configure do |config|
+  # By default, a 1x1 grey gif is used as placeholder ("data:image/gif;base64,...").
+  # This can be easily customized:
+  # config.placeholder = "/public/img/grey.gif"
+
+  # image_tag can return lazyload-friendly images by default,
+  # no need to pass the { lazy: true } option
+  config.lazy_by_default = true
+end