如何实现ProgressBar加载时显示文本，加载完成后移除文本？

当前问题：页面加载时，进度条能正常显示，但提示文本「Loading map please wait...」仅在页面及进度条加载完成后才出现。需要调整为加载开始时显示提示文本，页面加载完成后与进度条一同移除。

修改后的HTML代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="loadbar.js" type="text/javascript"></script>
<div class='progress' id="progress_div">
   <div class='bar' id='bar1'></div>
   <div class='percent' id='percent1'></div>
   <!-- 把提示文本移到进度条容器内，确保加载时立即显示 -->
   <div id="loading-text">
     <h1>Loading map please wait...</h1>
   </div>
</div>

<div id="wrapper">
   <div id="content">
     <!-- 页面加载完成后显示的内容 -->
   </div>
</div>

<input type="hidden" id="progress_width" value="0">

修改后的CSS代码 #

body
{
  margin:0px auto;
  padding:0px;
  font-family:helvetica;
}
.progress 
{
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background-color: #F2F2F2;
  /* 添加flex布局，让提示文本居中 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.bar 
{ 
  background-color: #819FF7; 
  width:0%; 
  height:5px; 
  border-radius: 3px;
  /* 进度条固定在顶部，避免遮挡提示文本 */
  position: absolute;
  top: 0;
  left: 0;
}
.percent 
{ 
  position:absolute; 
  display:inline-block; 
  top:3px; 
  left:48%; 
}
#loading-text h1
{
  text-align:center;
  font-size:35px;
  margin:0;
  color:#A9BCF5;
}
#wrapper
{
  width:995px;
  padding:0px;
  margin:0px auto;
  font-family:helvetica;
  text-align:center;
}
h1 p
{
  text-align:center;
  margin:0px;
  font-size:18px;
  text-decoration:underline;
  color:grey;
}

修改后的JavaScript代码 #

document.onreadystatechange = function(e) {
    if (document.readyState == "interactive") {
      var all = document.getElementsByTagName("*");
      for (var i = 0, max = all.length; i < max; i++) {
        set_ele(all[i]);
      }
    }
  }
  
  function check_element(ele) {
    var all = document.getElementsByTagName("*");
    var totalele = all.length;
    var per_inc = 100 / all.length;
  
    if ($(ele).on()) {
      var prog_width = per_inc + Number(document.getElementById("progress_width").value);
      document.getElementById("progress_width").value = prog_width;
      $("#bar1").animate({
        width: prog_width + "%"
      }, 10, function() {
        if (document.getElementById("bar1").style.width == "100%") {
          // 隐藏整个进度条容器，连带移除提示文本
          $(".progress").fadeOut("slow");
        }
      });
    } else {
      set_ele(ele);
    }
  }
  
  function set_ele(set_element) {
    check_element(set_element);
  }

核心修改说明 #

1. HTML结构调整：将提示文本从页面内容区移到进度条容器内，确保页面加载初始阶段就渲染该文本。
2. CSS布局优化：给进度条容器添加Flex布局，让提示文本在全屏背景中居中；调整进度条定位到顶部，避免遮挡提示内容。
3. JavaScript逻辑复用：保持原有进度条加载逻辑，完成加载时通过隐藏整个进度条容器，同时移除提示文本。

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