在内容完全渲染之前显示加载器

可以通过以下方法实现在网页加载时显示加载器，直到网页内容完全渲染完成后隐藏加载器。

HTML代码：

<div id="loader">
  <img src="loader.gif" alt="Loading...">
  <p>Loading...</p>
</div>

<!-- 网页其他内容 -->

CSS代码：

#loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色背景 */
  display: flex;
  justify-content: center;
  align-items: center;
}

#loader img {
  width: 50px;
  height: 50px;
}

#loader p {
  color: #fff;
  margin-left: 10px;
}

JavaScript代码：

window.addEventListener('DOMContentLoaded', function() {
  // DOMContentLoaded事件触发时，隐藏加载器
  document.querySelector('#loader').style.display = 'none';
});

window.onload = function() {
  // onload事件触发时，隐藏加载器
  document.querySelector('#loader').style.display = 'none';
};

// 为了防止网页在加载过程中出现长时间白屏的情况，可以先显示加载器，然后再一步一步渲染网页
// 中间的具体操作可以根据实际情况来判断和处理