Question

我的应用程序中有一些AJAX加载，我认为有一个加载图标会很好，因为有一点延迟。我抓住了http://tobiasahlin.com/spinkit的一些代码。加载和隐藏工作正常，除了我在标题中有一个标志，这是一个到根的链接：

<%= link_to "#{app_name}", root_url, id: "logo" %>

单击该链接将转到根目录，但加载图标可见。但是，如果您重新加载页面，则会根据需要隐藏图标。所以点击链接会有所不同。

观点：

<div class="spinner">

CSS不设置隐藏属性。如果我设置它，则总是隐藏微调器。

jQuery：

$( document ).ready(function() {

 // hide spinner
  $(".spinner").hide();


  // show spinner on AJAX start
  $(document).ajaxStart(function(){
    $(".spinner").show();
  });

  // hide spinner on AJAX stop
  $(document).ajaxStop(function(){
    $(".spinner").hide();
  });

}）;

我尝试在徽标上添加onclick。首先触发，然后页面加载旋转器可见。任何想法有什么不对？

Answer 1

特里，这是帮助你的评论的伴奏。

有几件事需要解决：

您应该保持CSS 隐藏 ，使用JQuery使其可见。

您目前使用JQuery 隐藏您的spinner DOM加载。

虽然这会起作用，但它会给您的应用程序增加不必要的开销。相反，当Ajax运行时，显示 spinner会更好：

#app/assets/stylesheets/application.css
.spinner {
   display: none; /* Use this instead of inline styles */
}

您应将您的微调器绑定到页面元素

您目前正在将spinner绑定到ajaxStart＆amp; ajaxStop。这些是全局函数，每次运行Ajax时都会触发。

这可能在一个简单的应用程序中工作，在更复杂的系统中是不好的做法。

我会做以下事情：

#app/assets/javascripts/application.js
spinner = function(){
   $(".spinner").toggle();
}

$(document).on("ajax:beforeSend", function(){
   spinner();
}).on("ajax:complete", function(){
   spinner();
});

$(document).on("click", ".element", function(){
    spinner();
    $.ajax({
      ...
});

这使用来自Rails UJS的ajax:beforeSend事件处理程序（每次调用remote: true时，都会触发）。

它还允许您将spinner函数用于应用中的任何其他事件/元素。

访问root的链接时如何隐藏AJAX加载图像

1 个答案: