Javascript 如何在div标记下的元素完全加载后隐藏加载程序_Javascript_Jquery

Javascript 如何在div标记下的元素完全加载后隐藏加载程序

javascript jquery

Javascript 如何在div标记下的元素完全加载后隐藏加载程序,javascript,jquery,Javascript,Jquery,每当我点击“加载更多”按钮时，我想显示一个加载程序。如果loadmore特性中的所有内容都加载在div标记下，那么我想隐藏加载程序我对此做了一些研究，但他们没有真正的帮助。这就是我到目前为止所做的。有人能帮忙吗 Javascript $('.load-more-btn').on('click', function() { var spinner = $('.spinner') var loadBtn = $(this) spinner.removeAttr('hidd

每当我点击“加载更多”按钮时，我想显示一个加载程序。如果loadmore特性中的所有内容都加载在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()
    }

  })

$('.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="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 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>


查看更多

试试这种方法

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()
    }

  })

$('.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="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 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>


我是用ajax加载的
我也被ajax加载了
如果ajax不加载这些“动态内容”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()
    }

  })

$('.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="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 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>


我是用ajax加载的
我也被ajax加载了
如果ajax不加载这些“动态内容”div，它们就不存在
查看更多

我就是这样做的

使用了

setTimeout（）

，因为我将其用于回调。另一种方法是使用

延迟（1000）.queue（）

使用

CSS

加载此文件

如果使用

$.ajax（）

，您将在

success:function（）{}

$（'.加载更多btn'）。在（'click'，function（）上{
$（'.spinner'）.css（'visibility'，'visible'）；
$（this.hide（））
如果（$（'.wrapper子项'）。长度>0）{
$（this.hide（）；
//setTimeout是全局的，支持回调
//（）=>{}是一个箭头函数
设置超时（（）=>{
$（this.show（）；
$（'.spinner'）.css（'可见性'，'隐藏'）
}, 1000);
}
})

.spinner{
内容：''；
背景：透明url（'https://www.bikearena-bender.de/.resources/bulls-templating/img/system/preloader.gif中心不重复；
背景尺寸：自动100%；
宽度：30px；
高度：30px；
位置：绝对位置；
可见性：隐藏；
}


查看更多

我就是这样做的

使用了

setTimeout（）

，因为我将其用于回调。另一种方法是使用

延迟（1000）.queue（）

使用

CSS

加载此文件

如果使用

$.ajax（）

，您将在

success:function（）{}

$（'.加载更多btn'）。在（'click'，function（）上{
$（'.spinner'）.css（'visibility'，'visible'）；
$（this.hide（））
如果（$（'.wrapper子项'）。长度>0）{
$（this.hide（）；
//setTimeout是全局的，支持回调
//（）=>{}是一个箭头函数
设置超时（（）=>{
$（this.show（）；
$（'.spinner'）.css（'可见性'，'隐藏'）
}, 1000);
}
})

.spinner{
内容：''；
背景：透明url（'https://www.bikearena-bender.de/.resources/bulls-templating/img/system/preloader.gif中心不重复；
背景尺寸：自动100%；
宽度：30px；
高度：30px；
位置：绝对位置；
可见性：隐藏；
}


查看更多

我可以问你为什么要添加

？我通常更喜欢在“div”中包装多个元素，以便两个元素都包含在一起，用于将来的“css”控制。我可以问你为什么要添加

？我通常更喜欢在“div”中包装多个元素，以便两个元素都包含在一起，用于将来的“css”控制