Loader出现时淡出我的页面

Question

我正在为我的内容创建一个过滤机制并进行此设置，每当过滤器选项被cliked时，在结果通过JQuery排序和显示之前，加载器会出现在屏幕中间。

我希望做的是在屏幕上显示加载程序时淡化整个页面。这是为了给出一个错觉，即在加载内容时整个页面都在后面。

我的加载程序的CSS是： -

.ajax-progress {
  width: 100%;
  position: fixed;
  left: 50%;
  top: 50%;
  display: block;     
 }

 .ajax-progress div.throbber {
      line-height: 58px;
      text-indent: 100px;
      word-spacing: 20px;
      letter-spacing: 12px;
      font-size: 45px;
      font-weight: 600;
      font-family: spinjs !important;
      text-decoration: none;
      color: #3182c5;

      width: 100px;
      margin: 0 auto;
    }

每当选择过滤选项时，推子出现在页面中间一秒钟，一旦结果通过Ajax显示就会消失。没有页面加载。

我在Drupal工作，但我想这不是我感兴趣的地方。我实际上不知道我需要哪些其他信息来帮助您提出解决方案。

请随时问我

Answer 1

由于您执行Ajax请求，为什么不使用其回调函数 - beforeSend和success。

$.ajax({
    type: '',
    url: url,
    data: $('filter_form').serialize(),
    beforeSend: function(){
        /* blanket the whole page and show the loader, 
           see @Last1Here jsfiddle: http://jsfiddle.net/yV3Ny/1/
        */
        $('.cover').fadeIn();
    },
    success: function(){
        $('.cover').fadeOut();
    }
});

使用全局ajax事件处理程序方法，使其成为每个Ajax请求的默认加载指示符。

$(document).ajaxSend(function() {
    $('.cover').fadeIn();
});
 $(document).ajaxSuccess(function() {
    $('.cover').fadeOut();
});

干杯！