如何在页面加载完成前显示AJAX加载动画替代初始白屏

问题根源 #

你当前的逻辑完全颠倒了：jQuery(window).load() 事件会等待页面所有资源（图片、样式、脚本、字体等）全部加载完成后才会执行，你把加载动画的显示逻辑写在这个事件里，自然要等页面加载完毕才会渲染动画，根本覆盖不了加载阶段的白屏时间。

解决方案 #

1. 调整HTML结构 #

将加载动画相关节点直接放在 <body> 标签的最开头，不要依赖JS动态插入，让页面解析时优先渲染加载动画：

<body>
  <!-- 直接放在body最开头，优先加载渲染 -->
  <div class='ui-loader-background'></div>
  <div id="loadingDiv">
    <div class="cssload-thecube">
      <div class="cssload-cube cssload-c1"></div>
      <div class="cssload-cube cssload-c2"></div>
      <div class="cssload-cube cssload-c4"></div>
      <div class="cssload-cube cssload-c3"></div>
    </div>
  </div>
  <!-- 后面是你原来的页面内容 -->
  ...
</body>

2. 前置加载动画样式 #

把加载动画相关的CSS直接写在 <head> 内的 <style> 标签中，不要放在外部CSS文件，避免外部资源加载延迟导致动画样式不生效，依然出现白屏：

<head>
  <style>
    .ui-loader-background {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background: #ffffff; /* 替换为你需要的背景色，完全覆盖白屏 */
      z-index: 99998;
    }
    #loadingDiv {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 99999;
      /* 你原来的动画样式补充在这里 */
    }
  </style>
  <!-- 后面是其他外部CSS、JS引入 -->
  ...
</head>

3. 调整JS逻辑 #

不需要用JS控制动画显示，反过来在页面加载完成后隐藏/移除动画即可：

jQuery(window).on('load', function() {
  // 加载完成后渐隐加载动画，可自定义过渡时间
  jQuery("#loadingDiv, .ui-loader-background").fadeOut(300, function() {
    jQuery(this).remove(); // 隐藏后移除节点，释放资源
  });
});

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