Question

我的预加载器不会停止加载，也不想过渡到主页。预加载器应该加载几秒钟，然后自动过渡到页面。我试过删除jquery / javascript中的内容。但是我找不到修复它的选项。

也在网上寻找解决方案，但没有一个对我有帮助。

在此先感谢您的帮助。

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

Answer 1

问题是由于您提供给, 500的第二个参数（on('load')）引起的，jQuery试图将其解析为GUID。删除该参数，您的代码将起作用：

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

请注意，在此示例中，我将叠加层设置为灰色，以显示其工作更清晰。

Answer 2

您可以简单地使用

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

预加载器不会停止加载

2 个答案: