CODEWITHSUNDEEP
jqueryhtmlcss
SHASHWAT SHARMA
SHASHWAT SHARMA

Reputation: 73

Preloader doesn't stop loading

My preloader won't stop loading and it doesn't want to transition to the main page. The preloader is supposed to load for few seconds and then automatically transition to the page. I've tried removing things in the jquery/javascript. But I couldn't find an option that fixes it.

Also looked on the web for solutions, but none of them helped me.

Thanks in advance for any help.

$(function() {
  $(window).on("load", function() {
    $('#preloader').fadeOut('slow', function() {
      $(this).remove();
    });
  }, 500);
});
#preloader {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 99999;
  width: 100%;
  height: 100%;
  overflow: visible;
  background: #ccc url('./eclipse.gif') no-repeat center center;
}
   <!DOCTYPE html>
<html lang="en">

<head>
    <title>Student Resource Portal</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
      integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link href="style.css" rel="stylesheet">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css"
      integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

</head>

<body>
<!--This is the preloader-->
<div id="preloader"></div>

  <!--This is our header-->

  <header>
    <nav class="navbar navbar-expand-sm sticky-top navbar-dark bg-primary shadow">
      <div class="container-fluid">
        <a href="#" class="navbar-brand"><span class="navbar-brand mb-0 h1">Csians</span></a>
        <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#myMenu" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                    </button>
        <!--These are nav items-->
        <div class="collapse navbar-collapse" id="myMenu">
          <ul class="navbar-nav ml-auto">
            <li class="nav-item">
              <a href="#" class="nav-link active">Home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="syllabus.html">Syllabus</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="notes.html">Notes</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="events.html">Events</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="contribute.html">Contribute</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>
  </header>
  <!--today's time table-->
  <!--we have to use card and make table here-->
  <main>
    <div class="container con-tt">
      <div class="card text-center">
        <div class="card-header">
          <h5>Today's Classes</h5>
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col">
                    <button id="cse1" class="btn col-sm-3 col-md-3 btn-primary" type="button" data-toggle="collapse" data-target="" aria-expanded="false" aria-controls="">CSE A</button>
                  </div>
                <div class="col">
                    <button id="cse2" class="btn col-sm-3 col-md-3 btn-primary" type="button" data-toggle="collapse" data-target="" aria-expanded="false" aria-controls="">CSE B</button>
                </div>
            </div>
            <div class="row">
            <div class="col section_a">
                <!--Here i want my section A lectures-->
            </div>
            <div class="col section_b">
                <!--Here i want my section B lectures-->

            </div>
            </div>
        </div>
      </div>
    </div>
  </main>
  <!--Footer-->
  <!-- Footer -->
  <nav class="page-footer fixed-bottom font-small bg-primary shadow">

    <!-- Copyright -->
    <div class="footer-copyright text-center py-3"><span style="color:white">Handcrafted with </span>
      <i class="fas fa-music"></i><span style="color:white"> and </span>
      <i class="fas fa-laptop-code"></i>
    </div>
    <!-- Copyright -->
  </nav>
  <!-- Footer -->

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

  <script src="main.js" crossorigin="anonymous"></script>
</body>

</html>

Upvotes: 1

Views: 3263

Answers (2)

Rory McCrossan
Rory McCrossan

Reputation: 337713

The problem is due to the second argument (the , 500) you provide to on('load'), which jQuery is attempting to parse as a GUID. Remove that argument and your code works:

$(function() {
  $(window).on("load", function() {
    $('#preloader').fadeOut('slow', function() {
      $(this).remove();
    });
  });
});
#preloader {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 99999;
  width: 100%;
  height: 100%;
  overflow: visible;
  background: #CCC url('./eclipse.gif') no-repeat center center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="preloader"></div>

Note that I made the overlay grey in this example to show it working more clearly.

Upvotes: 2

doğukan
doğukan

Reputation: 27559

You can use simply 

$(document).ready(function(){
 $("#preloader").hide();
});

Upvotes: 2

Related Questions