如何将URL加载的GIF预加载器居中并在页面加载后隐藏？

嘿，这问题我熟！要让你的预加载器居中显示，还能在页面完全加载后自动隐藏，咱们分两步来操作，很简单的：

第一步：用CSS让预加载器居中 #

给你的.loading容器添加下面的CSS样式，既能让GIF完美居中，还能让预加载器覆盖整个页面，避免加载过程中页面内容提前闪现：

.loading {
  /* 固定定位，占满整个浏览器视口 */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 可选白色背景，盖住未加载完成的页面内容 */
  background-color: #fff;
  /* Flex布局一键实现水平+垂直居中 */
  display: flex;
  justify-content: center;
  align-items: center;
  /* 把预加载器放在最上层，防止被其他元素遮挡 */
  z-index: 9999;
}

你的HTML代码保持原样即可：

<div class="loading"> 
  <img src="https://media.giphy.com/media/jFIgJGFHHFxde/giphy.gif"> 
</div>

第二步：页面加载完成后隐藏预加载器 #

用原生JavaScript监听window.load事件（这个事件会在所有资源：图片、样式表、脚本都加载完成后触发，刚好符合预加载器的需求），然后隐藏容器：

// 等待页面所有资源加载完毕
window.addEventListener('load', function() {
  // 获取预加载器元素
  const loader = document.querySelector('.loading');
  // 直接隐藏
  loader.style.display = 'none';

  // 如果你想要平滑消失的过渡效果，可以换成下面的写法：
  // 先给元素加个类触发过渡
  // loader.classList.add('fade-out');
  // 过渡结束后彻底隐藏（避免占着页面空间）
  // setTimeout(() => {
  //   loader.style.display = 'none';
  // }, 500);
});

如果要加过渡效果，记得在CSS里补充这些样式：

.loading {
  /* 保留之前的样式，新增过渡属性 */
  transition: opacity 0.5s ease;
}

.loading.fade-out {
  opacity: 0;
  pointer-events: none; /* 防止消失后还能触发元素上的事件 */
}

这样操作下来，你的预加载器就能完美居中，并且在页面完全加载好后自动消失啦！

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