Page hangs in 'PreLoader'

Question

I'm trying to develop a user registration and login system.

When loading the page, it hangs in the preloader without showing the content.

I loaded the page after commenting out the preloader part in my Thymeleaf page and works fine.

I can't find why is this happening, a little help would be really appreciated. Thanks!

HTML code segment:

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

CSS code segment:

/* 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 code segment:

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

});

Would you mind [accepting the answer](https://stackoverflow.com/help/someone-answers) by clicking the grey checkmark in my answer. If i have solved the question and provided a working solution. Thanks — Always Helping, Sep 06 '20 at 11:16
@AlwaysHelping Sorry for the late reply. I updated the code according to your answer but an exception was thrown `org.springframework.security.web.firewall.RequestRejectedException: The request was rejected because the URL contained a potentially malicious String "//"` — Rukshan Jayasekara, Sep 06 '20 at 11:32
Hi no worries. That error is not definitely not from because we added `$('document').ready(function() {})` - There something else going with some URL. Can you make sure you wrap add your jQuery only code inside document ready. Let me know. — Always Helping, Sep 06 '20 at 11:36
There are answers here for the error you are getting: Like this https://stackoverflow.com/questions/48453980/spring-5-0-3-requestrejectedexception-the-request-was-rejected-because-the-url OR this one: https://stackoverflow.com/questions/52566368/spring-boot-requestrejectedexception-the-request-was-rejected-because-the-url / there errors are because we added DOM ready function — Always Helping, Sep 06 '20 at 11:38
@AlwaysHelping nah dude :/. What did you meant by this `Can you make sure you wrap add your jQuery only code inside document ready` — Rukshan Jayasekara, Sep 07 '20 at 09:02
I am not sure how to help further. You need to fix up your spring configurations — Always Helping, Sep 07 '20 at 09:03
Have to refered to the question i have added above ? Because the answer i have provided below is not related to what you have mentioned as an error. — Always Helping, Sep 07 '20 at 09:06

score 1 · Answer 1 · answered Sep 06 '20 at 09:32

You need to use jQuery DOM ready function to make sure you .loader is hiding as window load function expect an event to be triggered in your case there is no event i.e click or change.

This will ensure you are scripts are getting executed when DOM is ready.

Live Demo:

$('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>

Page hangs in 'PreLoader'

1 Answers1