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% 的位置，直到隐藏。