Question

我有一个索引页面，加载速度非常快，没有任何问题。在该页面上，我有一个下拉菜单，称为2018年。单击该下拉菜单将显示月份。 Wehn用户单击特定月份后，加载页面所需的时间会更长。我想在中心保留一个“页面加载图标”。该图标应一直存在，直到页面完全加载。下面是我的下拉代码示例，单击每个导航项后，我希望加载一个页面。

<ul class="nav nav-tabs"> 

    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle active" data-toggle="dropdown" href="#" role="menu" aria-haspopup="true" aria-expanded="false">
        2018
      </a>
      <div class="dropdown-menu">
        <a class="dropdown-item"></a> <a class="atab" href="#" data-toggle = "tab">January</a>
        <a class="dropdown-item"></a> <a class="btab" href="#" data-toggle = "tab">February</a>
        <a class="dropdown-item"></a> <a class="btab" href="#" data-toggle = "tab">March</a>
        <a class="dropdown-item"></a> <a class="dtab" href="#" data-toggle = "tab">April</a>
        <a class="dropdown-item"></a> <a class="etab" href="#" data-toggle = "tab">May</a>
        <a class="dropdown-item"></a> <a class="ftab" href="#" data-toggle = "tab">June</a>
        <a class="dropdown-item"></a> <a class="gtab" href="#" data-toggle = "tab">July</a>
      </div>
    </li> 
</ul>

我下面有这个加载器脚本，用于在索引页面加载时显示加载图标。但是，当我单击下拉导航项目时，我不知道如何使用此功能。

<div id="loader"></div>
<div style="display:none;" id="myDiv" class="animate-bottom">
</div>

非常感谢您的帮助。

Answer 1

不要理会动画图像，请使用纯代码。只需在需要时显示它即可。

spin.js

此页面上的示例具有启用它的JavaScript。将事件添加到您的下拉菜单中即可。

Answer 2

css

<style>
        #loader {
            position: fixed;
            left: 50%;
            top: 50%;
            z-index: 999999;
            width: 150px;
            height: 150px;
            margin: -75px 0 0 -75px;
            border: 2px solid #f3f3f3;
            border-radius: 50%;
            background-color: #f3f3f3;
            /*border-top: 16px solid #3498db;*/
            width: 120px;
            height: 120px;
        }
    </style>

jQuery

$(document).load(function () {
        $("#loader").show();
        });
       $(document).ready(function () {
                $("#loader").hide();
                $(".atab").click(function () {
                    $("#loader").show();
                });
            });

html

<img id="loader" src="loading.gif" />

它为我工作

Answer 3

电笔无法正常工作，所以我为您编写了完整的代码

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

  <style>

        #loader {
            position: fixed;
            left: 50%;
            top: 50%;
            z-index: 999999;
            width: 150px;
            height: 150px;
            margin: -75px 0 0 -75px;
            border: 2px solid #f3f3f3;
            border-radius: 50%;
            background-color: #f3f3f3;
            /*border-top: 16px solid #3498db;*/
            width: 120px;
            height: 120px;

        }

  </style>
 </head>
<body>

<img id="loader" src="https://intelligencedespatrimoines.fr/ipat2/wp-content/plugins/gallery-by-supsystic/src/GridGallery/Galleries/assets/img/loading.gif" />
<ul class="nav nav-tabs"> 

    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle active" data-toggle="dropdown" href="#" role="menu" aria-haspopup="true" aria-expanded="false">
        2018
      </a>
      <div class="dropdown-menu">
        <a class="dropdown-item"></a> <a class="atab" href="#" data-toggle = "tab">January</a>
        <a class="dropdown-item"></a> <a class="btab" href="#" data-toggle = "tab">February</a>
        <a class="dropdown-item"></a> <a class="btab" href="#" data-toggle = "tab">March</a>
        <a class="dropdown-item"></a> <a class="dtab" href="#" data-toggle = "tab">April</a>
        <a class="dropdown-item"></a> <a class="etab" href="#" data-toggle = "tab">May</a>
        <a class="dropdown-item"></a> <a class="ftab" href="#" data-toggle = "tab">June</a>
        <a class="dropdown-item"></a> <a class="gtab" href="#" data-toggle = "tab">July</a>
      </div>
    </li> 
</ul>
</div>

<script>
  $(document).ready(function(){
        $("#loader").hide();
        $(".atab").click(function(){
            $("#loader").show();
        });
    });
  $(document).load(function () {
        $("#loader").show();
   });</script>
</body>
</html>

添加链接a =“＃”获得良好效果

有人单击页面上的下拉导航项时的页面加载图标

3 个答案: