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

【问题标题】：Page loading icon when some one click a drop-down nav item on a page当有人单击页面上的下拉导航项时的页面加载图标
【发布时间】：2018-08-02 16:05:28
【问题描述】：

我有一个加载速度非常快的索引页面，没有任何问题。在该页面上，我有一个名为 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>

非常感谢您提前提供的帮助。

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

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

<!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="#" 以获得良好的效果

【讨论】：

@Anil，首先感谢您抽出宝贵时间提及代码。我看到几个问题。 1）我用我的 CSS 运行加载图标的实际代码未能在我的主页上运行。所以我可以实现调出一个加载图标，该图标将在页面加载之前显示。之后，它将停止。 2）您的代码工作正常，但是一旦我在脚本上使用了您的代码，即使在显示选项卡内容之后，我也会看到加载图标。我的意思是，一旦我点击一月下拉菜单，一月的仪表板会在 5 秒内出现，即使在页面显示后仍然加载图标继续运行
@SSS 您将脚本添加到每个页面或您的主页

【解决方案2】：

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

spin.js

这个页面上的例子有 javascript 来激活它。将活动添加到您的下拉菜单中。

【讨论】：

【解决方案3】：

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" />

它对我有用

【讨论】：

感谢您的代码，但我没有做对。你介意用代码笔解释一下吗？