用JavaScript实现让网页加载完成后停止加载并显示加载条卡着不动

以下是一个简单的实现示例：

在 HTML 文件中添加一个加载条：

<div id="loading-bar"></div>

在 CSS 文件中为加载条设置样式：

#loading-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 5px;
  background-color: #007bff;
  transition: width 0.5s ease-in-out;
  z-index: 9999;
}

在 JavaScript 文件中添加以下代码：

window.addEventListener("load", function () {
  const loadingBar = document.getElementById("loading-bar");
  loadingBar.style.width = "100%";
  setTimeout(function () {
    loadingBar.style.display = "none";
  }, 500);
});

该代码使用了 window.addEventListener 函数，当页面加载完成后，执行回调函数。在回调函数中，获取加载条元素，设置它的宽度为 100% 以显示完整的加载条，然后使用 setTimeout 函数延迟 500 毫秒后将加载条隐藏。这样，加载条就会卡在 100% 的位置，直到隐藏