如何解决Bulma CSS的pageloader组件无限加载无法停止的问题

bulma-pageloader的显示隐藏完全由is-active类控制：元素带有该类时展示加载状态，移除该类后自动隐藏。你当前代码直接在HTML结构中写死了is-active类，没有对应的移除逻辑，所以加载器会一直保持显示。

常用解决方案 #

• 场景1：页面资源加载完成后自动关闭
  添加JS逻辑监听页面加载完成事件，触发后移除is-active类即可：

  window.addEventListener('load', function() {
    const pageLoader = document.querySelector('.pageloader')
    if(pageLoader) {
      pageLoader.classList.remove('is-active')
    }
  })
  

• 场景2：自定义时机手动关闭（如异步请求完成后关闭）
  封装关闭方法，需要时主动调用：

  // 封装关闭方法
  function closePageLoader() {
    const pageLoader = document.querySelector('.pageloader')
    pageLoader && pageLoader.classList.remove('is-active')
  }
  
  // 示例：接口请求完成后调用关闭
  // fetch('/api/xxx').then(res => {
  //   // 处理接口返回逻辑
  //   closePageLoader()
  // })
  

修正后完整代码示例 #

<!DOCTYPE html>
<html>
<head>
  <!-- 原代码中head标签未闭合，此处已修正 -->
  <link rel="stylesheet" type="text/css" href="\URL/node_modules/bulma-pageloader/dist/css/bulma-pageloader.min.css">
</head>
<body>
  <div class="pageloader is-active is-info"><span class="title"> Pageloader</span></div>
  <script>
    // 页面加载完成自动关闭
    window.addEventListener('load', function() {
      const pageLoader = document.querySelector('.pageloader')
      if(pageLoader) {
        pageLoader.classList.remove('is-active')
      }
    })
  </script>
</body>
</html>

内容的提问来源于stack exchange，提问作者Mayor