页面挂在“预加载器”中答案

【问题标题】：Page hangs in 'PreLoader'页面挂在“预加载器”中
【发布时间】：2020-12-24 23:38:52
【问题描述】：

我正在尝试开发一个用户注册和登录系统。

加载页面时，在预加载器中挂起，不显示内容。

在我的 Thymeleaf 页面中注释掉预加载器部分后，我加载了该页面并且工作正常。

我不知道为什么会发生这种情况，非常感谢您提供一点帮助。谢谢！

HTML 代码段：

        <!-- Page Preloder -->
    
    <div id="preloder">
        <div class="loader"></div>
    </div>

CSS 代码段：

/* Preloder */

#preloder {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 999999;
    background: #000;
}

.loader {
    width: 40px;
    height: 40px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -13px;
    margin-left: -13px;
    border-radius: 60px;
    animation: loader 0.8s linear infinite;
    -webkit-animation: loader 0.8s linear infinite;
}

@keyframes loader {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        border: 4px solid #f44336;
        border-left-color: transparent;
    }
    50% {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
        border: 4px solid #673ab7;
        border-left-color: transparent;
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
        border: 4px solid #f44336;
        border-left-color: transparent;
    }
}

@-webkit-keyframes loader {
    0% {
        -webkit-transform: rotate(0deg);
        border: 4px solid #f44336;
        border-left-color: transparent;
    }
    50% {
        -webkit-transform: rotate(180deg);
        border: 4px solid #673ab7;
        border-left-color: transparent;
    }
    100% {
        -webkit-transform: rotate(360deg);
        border: 4px solid #f44336;
        border-left-color: transparent;
    }
}

.elements-section {
    padding-top: 100px;
}

.el-title {
    margin-bottom: 75px;
}

.element {
    margin-bottom: 100px;
}

.element:last-child {
    margin-bottom: 0;
}

js代码段：

$(window).on('load', function() {
    /*------------------
        Preloder
    --------------------*/
    $(".loader").fadeOut();
    $("#preloder").delay(400).fadeOut("slow");

});

【问题讨论】：

您是否介意 accepting the answer 通过单击我的答案中的灰色复选标记。如果我已经解决了这个问题并提供了一个可行的解决方案。谢谢
@AlwaysHelping 抱歉回复晚了。我根据您的回答更新了代码，但抛出了异常org.springframework.security.web.firewall.RequestRejectedException: The request was rejected because the URL contained a potentially malicious String "//"
您好，不用担心。该错误并非绝对不是因为我们添加了$('document').ready(function() {}) - 某些 URL 中还有其他内容。您能否确保将仅 jQuery 代码添加到文档中。告诉我。
这里有你得到的错误的答案：像这个stackoverflow.com/questions/48453980/… 或者这个：stackoverflow.com/questions/52566368/… / 有错误是因为我们添加了 DOM 就绪功能
这里的任何更新 - 现在都修复了吗？

标签： javascript html jquery css thymeleaf

【解决方案1】：

你需要使用 jQuery DOM ready 函数来确保你 .loader 是 hiding 作为窗口 load 函数期望事件是 triggered 在你的情况下有 no事件即click 或change。

这将确保 scripts 在 DOM 准备就绪时被执行。

现场演示：

$('document').ready(function() {
  /*------------------
      Preloder
  --------------------*/
  $(".loader").fadeOut();
  $("#preloder").delay(400).fadeOut("slow");
});

/* Preloder */

#preloder {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 999999;
  background: #000;
}

.loader {
  width: 40px;
  height: 40px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -13px;
  margin-left: -13px;
  border-radius: 60px;
  animation: loader 0.8s linear infinite;
  -webkit-animation: loader 0.8s linear infinite;
}

@keyframes loader {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    border: 4px solid #f44336;
    border-left-color: transparent;
  }
  50% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    border: 4px solid #673ab7;
    border-left-color: transparent;
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
    border: 4px solid #f44336;
    border-left-color: transparent;
  }
}

@-webkit-keyframes loader {
  0% {
    -webkit-transform: rotate(0deg);
    border: 4px solid #f44336;
    border-left-color: transparent;
  }
  50% {
    -webkit-transform: rotate(180deg);
    border: 4px solid #673ab7;
    border-left-color: transparent;
  }
  100% {
    -webkit-transform: rotate(360deg);
    border: 4px solid #f44336;
    border-left-color: transparent;
  }
}

.elements-section {
  padding-top: 100px;
}

.el-title {
  margin-bottom: 75px;
}

.element {
  margin-bottom: 100px;
}

.element:last-child {
  margin-bottom: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="preloder">
  <div class="loader"></div>
</div>

【讨论】：