Создать загрузчик для моего сайта

Question

Я пытаюсь создать загрузчик для своего сайта, но он не работает. Я использую turbolinks classic для этой операции. Загрузочный загрузчик загружается после загрузки страницы, который я не хочу. Мне нужно, когда страница загружается, что время мне нужен загрузчик для загрузки и когда страница получает загрузить загрузчик должен получить исчезнуть и то и другое не working.Here мой код

<div id="content-wrapper"> 
     <div class="loader"><img src='/assets/gionee-loader.gif' style='width:100px;height:100px;margin-left:30%;margin-top:10%;display:block;'/></div> 
     <div class="row"> 
      <div class="col-lg-12"> 
       <div class="main-box clearfix"> 
        <div class="clearfix"> 
         <div class="common_page gsb1"> 
          <div class="hdr"> 
           <div class="row"> 
            <div class="col-md-3"> 
             <h4>Dashboard</h4> 
            </div> 
           <div class="col-md-5"> 
           </div> 
           <div class="col-md-4 pull-right"> 
            <%=render 'common/date'%> 
           </div>     
          </div>  
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
      <center> 
<div class="table-responsive custom-bg"> 
<table class="custom-table" cellspacing="0"> 

<tr> 

<td><table width="100%" border="0" class="tbl-second-lvl" cellspacing="0" cellpadding="0"> 

    <tr> 
    <td> Name</td> 
    <td>Email </td> 

    </tr> 
<tr></tr> 
<%@dashboard.each do |dashboard|%> 
    <tr> 
    <td><b><%=dashboard[:NAME]%></b></td> 
    <td><%=dashboard[:email]%></td> 


    </tr> 
    <%end%> 





</table></td> 
</tr> 

</table> 
<%= will_paginate @dashboard %> 
</div> 
</center> 
      <%=render 'common/footer'%> 
    </div> 

<script> 
    $("#retailer").attr("class","active") 



    $(document).on('page:load', function(event) { 
     $('.loader img').css("display","none"); 
    }); 


    </script> 

Но загрузчик не загружает изображение Может кто-нибудь сказать мне, как это сделать. И я не хочу использовать ajax для этой вещи.

Answer 1

установить отображение на блок изначально: -

  <div class="loader"><img src='/assets/gionee-loader.gif' style='width:100px;height:100px;margin-left:30%;margin-top:10%;display:block;'/></div> 

или просто

<div class="loader"><img src='/assets/gionee-loader.gif' style='width:100px;height:100px;margin-left:30%;margin-top:10%;'/></div>

и удалить

$(document).on('page:before-unload', function(event) { 
//remove $('.loader img').css("display","block"); 
}); 

В результате загрузчик изображения будет не виден после документ полностью загружен, но виден до тех пор