WordPress使用Divi添加CSS自定义颜色预加载器不显示问题求助

问题原因 #

• CSS路径错误：.cssload-loader的background-image属性填写的assests/dp-loader8.gif存在拼写错误（正确拼写为assets），且路径为相对路径，未替换为你WordPress站点内的gif实际访问地址，导致素材加载失败
• 容器尺寸冲突：父级.loader设置了width:75px!important，但子级.cssload-loader宽度为120px，超出部分被父容器截断导致动画不可见
• JS方法废弃：你使用的jQuery 3.3.1版本已经移除了jQuery(window).load()写法，该代码不会执行，导致预加载器逻辑失效
• 居中偏移错误：.loader设置的margin:0 0 0 -30px无法让120px宽的加载动画居中，会导致动画超出可视区域

修正后的代码 #

修正后的JS代码 #

jQuery(window).on('load', function() {
  if (jQuery('.et-bfb').length <= 0 && jQuery('.et-fb').length <= 0) {
    jQuery('.loader').delay(1000).fadeOut("slow");
    jQuery('.overlay-loader').delay(1000).fadeOut("slow");
  } else {
    jQuery(".overlay-loader").css('display', 'none');
  }
})

修正后的CSS代码 #

.overlay-loader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ffffff;
  opacity: 1;
  z-index: 999999;
  height: 100%;
  width: 100%;
  overflow: hidden !important;
  margin: auto;
}

.loader {
  position: absolute;
  left: 50%;
  top: 40%;
  background-repeat: no-repeat;
  background-position: center;
  -webkit-background-size: cover;
  background-size: cover;
  width: 120px !important;
  height: 120px !important;
  margin: 0px 0 0 -60px;
}

.cssload-loader {
  position: relative;
  width: 120px;
  height: 120px;
  /* 请将下方地址替换为你上传到WordPress媒体库的gif实际访问链接 */
  background-image: url(替换为你的gif实际路径);
  border-radius: 50%;
  perspective: 1200px
}

.cssload-inner {
  position: absolute;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border-radius: 50%;
}

.cssload-inner.cssload-one {
  left: 0;
  top: 0;
  animation: cssload-rotate-one .85s linear infinite;
  border-bottom: 5px solid #A7784A;
}

.cssload-inner.cssload-two {
  right: 0;
  top: 0;
  animation: cssload-rotate-two .85s linear infinite;
  border-right: 5px solid #A7784A;
}

.cssload-inner.cssload-three {
  right: 0;
  bottom: 0;
  animation: cssload-rotate-three .85s linear infinite;
  border-top: 5px solid #A7784A;
}

@keyframes cssload-rotate-one {
  0% {
    transform: rotateX(35deg) rotateY(-45deg) rotateZ(0)
  }
  100% {
    transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg)
  }
}

@-webkit-keyframes cssload-rotate-one {
  0% {
    -webkit-transform: rotateX(35deg) rotateY(-45deg) rotateZ(0)
  }
  100% {
    -webkit-transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg)
  }
}

@keyframes cssload-rotate-two {
  0% {
    transform: rotateX(50deg) rotateY(10deg) rotateZ(0)
  }
  100% {
    transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg)
  }
}

@-webkit-keyframes cssload-rotate-two {
  0% {
    -webkit-transform: rotateX(50deg) rotateY(10deg) rotateZ(0)
  }
  100% {
    -webkit-transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg)
  }
}

@keyframes cssload-rotate-three {
  0% {
    transform: rotateX(35deg) rotateY(55deg) rotateZ(0)
  }
  100% {
    transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg)
  }
}

@-webkit-keyframes cssload-rotate-three {
  0% {
    -webkit-transform: rotateX(35deg) rotateY(55deg) rotateZ(0)
  }
  100% {
    -webkit-transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg)
  }
}

HTML代码无需改动，直接使用原有代码即可 #

代码部署提示：Divi主题下请将HTML代码放到「主题选项-集成-开头代码」区域，CSS代码放到「主题选项-自定义CSS」区域，JS代码放到「主题选项-集成-结尾代码」区域，避免加载顺序异常。

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