Javascript 为我的网站创建加载程序

我正在尝试为我的网站创建加载程序，但它不起作用。我正在使用turbolinks classic进行此操作。加载程序在页面加载后加载，这是我不希望的。我需要在页面加载时加载我的加载程序，当页面加载时加载程序应该消失。这是我的代码

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

仪表板
名称
电子邮件
$（“#零售商”）.attr（“类”、“活动”）
$（文档）.on（'page:load'，函数（事件）{
$（'.loader img'）.css（“显示”、“无”）；
});

---

但是加载程序没有加载图像。有人能告诉我怎么做吗？我不想使用ajax来实现这一点

将display设置为block-initial:-

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

---

因此，在文档完全加载后，加载器图像将不可见，但在此之前，加载器图像是可见的

这看起来像一个卸粮器-因为图像在卸载前显示-也许您希望删除

显示：无形成图像样式属性我的意思是图像在“卸载之前”显示为“无”

。。。换句话说，它永远都看不见，真的吗？看我的第一个内容实际上我的加载程序不工作，它是在页面加载之后加载的，这是我不想要的。我需要当页面加载时，我需要加载程序，当页面完全加载后，加载程序应该消失如果加载程序仍然不可见，请尝试使用超时，同时在$（文档）内将display设置为none。在（page:load）上，在html加载之前，您不能显示加载程序，除非你使用的是某种模板系统。如何做到这一点？例如，我使用angularjs作为前端。它的框架很好，有很多特性，但是loader应该按照它的工作方式工作。。如果不加载html，它将不会显示，即使在模板中，直到加载程序模板加载它才会显示

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