如何：在页面中放置多个 ajax 加载器，当您加载每个加载器时，加载... div 覆盖它？

Question

示例：

我希望#loading在加载时覆盖#ajax-1 并在加载时覆盖#ajax-2等

HTML

<div>
  <div id='ajax-1'>
  </div>
  <div id='ajax-2'>
  </div>
  ...
</div>
<div id='loading'>loading...</div>

Answer 1

检查jquery加载函数Here，在jquery加载

时使用setTimeout删除加载文本

$(function(){
  $('#ajax-1').load('ajax-1.php',function(){
    $('#loading').appendTo('#ajax-1').show();
    setTimeout(function(){
        $('#loading').appendTo('body').hide();
    },2000);            
  });

Answer 2

这个例子就是我的答案：

https://jsfiddle.net/a3dmorteza/0528hk8b/

在示例中，您可以在页面中放置多个 ajax 加载器，当您加载每个加载器时，加载... div 覆盖它。

HTML

<div id="page">
  <ul class='buttons-list'>
    <li class='fa fa-refresh' data-id='1'> refresh 1st</li>
    <li class='fa fa-refresh' data-id='2'> refresh 2nd</li>
    <li class='fa fa-refresh' data-id='3'> refresh 3rd</li>
  </ul>

  <div class='ajax-section' data-id='1'>  
  </div>
  <div class='ajax-section' data-id='2'>  
  </div>
  <div class='ajax-section' data-id='3'>  
  </div>

  <div class='loading-ct'>
    <div class='loading'>
      <i class="fa fa-refresh fa-spin fa-3x"></i>
    </div>
  </div>
</div>

CSS

.ajax-section,
.buttons-list {
  position: relative;
  width: 70%;
  height: 200px;
  margin: 10px auto;
  padding: 10px;
  background-color: yellow;
}
.buttons-list {
  list-style: none;
  background: none;
  height: auto;
}
.buttons-list li {
  padding: 5px;
  margin-right: 5px;
  border: 1px solid black;
  cursor: pointer;
}
/* Absolute Center Spinner */
.loading {
  position: absolute;
  z-index: 999;
  height: 3em;
  width: 3em;
  overflow: show;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}


/* Transparent Overlay */

.loading-ct {
  display: block;
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
}

JQuery

$(function(){
    $('.loading-ct').hide();

  $('.fa-refresh').on('click', function(){
    $('[data-id='+$(this).data('id')+']').trigger('refresh');
    $('body').off('refresh', '.ajax-section', func);
  });

  $('body').on('refresh', '.ajax-section', func);
});

function func(e)
{
  $('body .loading-ct').clone().appendTo(e.target).show();
  $(e.target).load('/echo/html/',
    {
        html: "<p>This is ajax-section "+$(e.target).data('id')+"</p>",
        delay: 2
    },
    function(){
        $('body').on('refresh', '.ajax-section', func);
    }
  );
}

如何：在页面中放置多个 ajax 加载器，当您加载每个加载器时，加载... div 覆盖它？

how to: put multiple ajax loader in the page and when you load each of them, the loading... div cover its?

ajax

jquery

loading