如何在页面加载完成前显示CSS预加载遮罩 加载后通过JS隐藏

你现有代码的问题如下：

• 原生DOM方法拼写错误：getElementByClassName应为getElementsByClassName，该方法返回的是匹配类名的元素集合，无法直接设置style属性
• 调用getElementsByClassName时参数不需要带类选择器前缀.，直接传入类名loader即可
• 你的所有预加载元素（包括加载动画、文字）都包裹在.center容器内，直接隐藏整个容器效率更高，不需要单独修改每个loader元素

推荐实现（基于已引入的jQuery，代码简洁） #

直接隐藏整个预加载容器即可：

$(window).on("load", function() {
  $(".center").css("visibility", "hidden");
  // 如果需要直接移除预加载元素占用的页面空间，可以换成下面的写法
  // $(".center").hide();
});

纯原生JS实现（不需要依赖jQuery） #

window.addEventListener('load', function() {
  document.querySelector('.center').style.visibility = 'hidden';
});

优化建议：增加顺滑的消失效果 #

你可以给预加载容器加过渡动画，让隐藏过程更自然：

1. 给.center新增过渡相关CSS属性：

.center {
  position: fixed;
  top: 50%;
  left: 50%;
  margin-left: -120px;
  /* margin is -0.5 * dimension */
  margin-top: -85px;
  /* 新增过渡配置 */
  transition: opacity 0.3s ease, visibility 0.3s ease;
  opacity: 1;
  visibility: visible;
}
.center.hide {
  opacity: 0;
  visibility: hidden;
}

2. 修改JS逻辑，加载完成后给容器加隐藏类：

$(window).on("load", function() {
  $(".center").addClass("hide");
  // 动画结束后如果需要彻底移除预加载元素，可以加如下延时逻辑
  setTimeout(() => $(".center").remove(), 300);
});

内容的提问来源于stack exchange，提问作者Basil Moses