Question

每当我点击一个加载更多按钮时，我想显示一个加载器。如果加载更多功能的所有内容都加载在div标签下，我想隐藏加载器。

我已经做了一些关于它的研究，但他们并没有真正帮助。这是我到目前为止所做的。任何人都可以帮忙解决这个问题吗？

的Javascript

$('.load-more-btn').on('click', function() {
    var spinner = $('.spinner')
    var loadBtn = $(this)

    spinner.removeAttr('hidden')
    loadBtn.hide()

    if ($('.wrapper-children').length > 0) {
      loadBtn.delay(1000).show(0)
      spinner.hide()
    }

  })

HTML

<div class="wrapper-children">
  <!-- Additional contents by Ajax will come here -->
  <div class="spinner" hidden>
    <span class="inner"></span>
    <span class="inner"></span>
    <span class="inner"></span>
  </div>
</div>

<div class="...">
  <a class="load-more-btn">View More</a>
</div>

Answer 1

这就是我这样做的方式

使用-- this would work if there was no monad around, and errors did not have to be handled Number . foldl1 op $ map unpackNum params，因为我将它用于回调。替代方案是使用setTimeout()。

使用delay(1000).queue()加载.gif。

如果使用CSS，则会在$.ajax()

上停用gif

success: function(){}

$('.load-more-btn').on('click', function() {
    $('.spinner').css('visibility', 'visible');
    
    $(this).hide()
    if ($('.wrapper-children').length > 0) {
    	$(this).hide();
      
      // setTimeout is global and supports callbacks
      // () => {} is an arrow-function
    	setTimeout(() => {
        $(this).show();
        $('.spinner').css('visibility', 'hidden')
      }, 1000);
      
    }
  })

.spinner {
  content: ' ';
  background: transparent url('https://www.bikearena-bender.de/.resources/bulls-templating/img/system/preloader.gif')  center no-repeat ;
  background-size : auto 100%;
  width: 30px;
  height: 30px;
  position: absolute;
  visibility: hidden;
}

Answer 2

试试这种方式

<强>的Javascript

$('.load-more-btn').on('click', function() {
    var spinner = $('.spinner')
    var loadBtn = $(this)

    spinner.removeAttr('hidden')
    loadBtn.hide()

    if ($('.wrapper-children .dynamic-content').length > 0) {
      loadBtn.delay(1000).show(0)
      spinner.hide()
    }

  })

<强> HTML

<div class="wrapper-children">
  <!-- Additional contents by Ajax will come here-->
  <div class=“dynamic-content”>I’m loaded by ajax</div>
  <div class=“dynamic-content”>I’m loaded by ajax too</div>
  <div class=“dynamic-content”>These ‘dynamic-content’ divs won’t exist if they aren’t being loaded by ajax</div>
  <div class="spinner" hidden>
    <span class="inner"></span>
    <span class="inner"></span>
    <span class="inner"></span>
  </div>
</div>

<div class="...">
  <a class="load-more-btn">View More</a>
</div>

如何在div标签下的元素完全加载后隐藏加载器

2 个答案: