Question

我正在尝试为每个ajax请求显示加载指示符，我在rails 3应用程序中工作。

HTML：

<div id="loading-indicator">
 <%= image_tag("loading.gif", :id => "loading-indicator", :style => "display:none") %>
</div>

CSS：

#loading-indicator {
   position: absolute;
   left: 10px;
   top: 10px;
 }

我在assest / javascripts /

中放置的

loading.js：

$(document).ready(function(){
    $(document).ajaxSend(function(event, request, settings) {
        $('#loading-indicator').show();
    });

    $(document).ajaxComplete(function(event, request, settings) {
        $('#loading-indicator').hide();
    });
});

我的application.js看起来像这样：

//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require_tree .

它起作用，没有任何表现。任何帮助将不胜感激。

Answer 1

我通常会将这段代码保存到以下情况中：

$(function() {
  $('#loading-indicator')
    .hide()  // hide it initially.
    .ajaxStart(function() {
      $(this).show(); // show on any Ajax event.
    })
    .ajaxStop(function() {
      $(this).hide(); // hide it when it is done.
  });
});

---编辑---

这不适用于最新版本的jQuery。从jQuery 1.8开始，.ajaxStart()方法只应附加到document。因此，代码应如下所示：

$(function() {
  $('#loading-indicator').hide();  // hide it initially.
  $(document)  
    .ajaxStart(function() {
      $('#loading-indicator').show(); // show on any Ajax event.
    })
    .ajaxStop(function() {
      $('#loading-indicator').hide(); // hide it when it is done.
  });
});

Answer 2

在技术上，您不能对同一文档中的两个不同元素使用相同的“id”两次。即你要为div和img标签分配id =“loading-indicator”;这可能会导致JS DOM选择和操作错误。

Answer 3

问题出在css样式标签和css位置

我通过这样做解决了这个问题：

HTML：

<div id="loading-indicator">
 <%= image_tag("loading.gif", :id => "loading-indicator") %>
</div>

<强> CSS：

#loading-indicator {
   left: 10px;
   top: 10px;
 }

如何在Ajax请求处理期间显示动画图标 - Rails 3

3 个答案: