WordPress Divi主题下CSS预加载器失效（显示在页脚）问题排查与解决方案请求

Alright, let's figure out why your preloader is stuck in the footer and not doing its job properly. After looking at your code, there are a few key issues causing this—let's walk through them and fix everything step by step:

Core Problems Identified #

1. Wrong Container Positioning: Your .cssload-container uses position: relative, which keeps it in the normal document flow (hence ending up in the footer). Preloaders need to cover the entire screen, not follow the page content.
2. Broken JavaScript: You used const cssload-container as a variable name—hyphens aren't allowed in JS variable names, so this throws an error and prevents the preloader from hiding after page load.
3. Incomplete Hide Animation: Your fadeOut keyframe wasn't closed properly, and you weren't handling the preloader's z-index or interaction blocking.

Fixed Full Code Set #

1. Updated HTML (Add to WordPress Section) #

<div class="cssload-container">
  <div class="cssload-item cssload-ventilator"></div>
</div>

2. Corrected JavaScript (Add to WordPress Section) #

window.addEventListener("load", function () {
  // Fixed variable name (no hyphens allowed)
  const cssloadContainer = document.querySelector(".cssload-container");
  // Add a check to avoid errors if the element isn't found
  if (cssloadContainer) {
    cssloadContainer.classList.add("hidden");
  }
});

3. Revised CSS (Add to Divi Custom CSS) #

/* Full-screen preloader container */
.cssload-container {
  position: fixed; /* Lock to viewport */
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #ffffff; /* White background to hide loading page content */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999; /* Ensure it's above all Divi elements */
  transition: opacity 0.3s ease, visibility 0.3s ease; /* Smooth fade-out */
}

.cssload-container .cssload-item {
  margin: auto;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  box-sizing: border-box;
  width: 49px;
  height: 49px;
  background-color: rgb(1,1,44);
  box-shadow: 0 0 8px 1px rgba(219,14,181,0.57);
}

.cssload-container .cssload-ventilator {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  animation: cssload-spin 1.3s ease-in-out infinite reverse;
  transition: all 0.26s ease;
}

.cssload-container .cssload-ventilator:before, .cssload-container .cssload-ventilator:after {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgb(219,14,181);
  box-sizing: border-box;
  border-radius: 50%;
  box-shadow: 0 0 8px 1px rgba(1,1,44,0.52);
  animation: cssload-shapeit 0.65s ease infinite alternate;
  transition: all 0.26s ease;
  content: '';
}

.cssload-container .cssload-ventilator:before {
  left: -125%;
  border-left: 2px solid rgb(1,1,44);
}

.cssload-container .cssload-ventilator:after {
  right: -125%;
  border-right: 2px solid rgb(1,1,44);
}

@keyframes cssload-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@-webkit-keyframes cssload-spin {
  from { -webkit-transform: rotate(0deg); }
  to { -webkit-transform: rotate(360deg); }
}

@keyframes cssload-shapeit {
  from { border-radius: 50%; }
  to { border-radius: 0px; }
}

@-webkit-keyframes cssload-shapeit {
  from { border-radius: 50%; }
  to { border-radius: 0px; }
}

/* Hidden state for preloader */
.cssload-container.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none; /* Prevent blocking clicks after hiding */
}

Key Fixes Explained #

• Fixed Positioning: Switching to position: fixed makes the preloader cover the entire screen, not just sit in the document flow. The high z-index ensures it stays on top of Divi's elements.
• Valid JavaScript: Renamed the variable to cssloadContainer (no hyphens) so the script doesn't throw errors, allowing it to properly add the hidden class when the page loads.
• Simplified Hide Logic: Replaced the incomplete animation with a smooth transition, and added pointer-events: none so users can interact with the page as soon as the preloader hides.
• Background Mask: Added a white background to the container so users don't see the page loading in the background, which is standard for preloaders.

Divi-Specific Placement Tips #

• Add the HTML to Divi Theme Options > Integration > Add code to the < head > of your blog
• Add the JS to Divi Theme Options > Integration > Add code to the < body > (good for tracking codes)
• Add the CSS to Divi Theme Options > General > Custom CSS

This setup ensures your preloader works exactly as intended—covering the screen during load, animating correctly, and hiding smoothly once the page is ready.

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