Question

我试图通过带有turbolinks的ajax加载页面时显示动画。

我创建了一个部分_loader.html.erb并添加了代码。

js似乎没有触发ajaxStart或ajaxStop。

我也尝试将js包装在$ function和$（document）中，但是无法让它工作。

我做错了什么？

<script>
    // hide it first
    $(".loading-indicator").hide();
    alert("hide at first")

    // when an ajax request starts, show spinner
    $.ajaxStart(function(){
        $(".loading-indicator").show();
        alert("start")
    });

    // when an ajax request complets, hide spinner
    $.ajaxStop(function(){
        $(".loading-indicator").hide();
        alert("stop")
    });
 </script>

     <%= image_tag("loading.gif", :class => "loading-indicator", :style => "") %>

  <style>
    .loading-indicator {

   }
  </style>

Answer 1

通过ajaxStart()和ajaxStop()，您只需注册第一个ajax请求启动时调用的处理程序，并完成所有ajax请求。你永远不会做一个ajax请求，所以他们永远不会被调用。使用.ajax()执行实际请求。

您还可以使用complete回调隐藏加载动画：

function request() {
    $(".loading-indicator").show();
    $.ajax({
       ...
       complete: function() { $(".loading-indicator").hide(); } 
    });
}

使用部分包含的css和js创建一个加载器

1 个答案: