web项目-取消loading弹窗，改为NProgress，解决点击页面闪烁的问题

blog-web/src/main/resources/static/js/zhyd.js

@@ -161,6 +161,14 @@ var PaymentUtils = window.payment || {
 
 };
 $(function () {
+
+    $(document).ready(function () {
+        NProgress.start();
+    });
+    $(window).load(function () {
+        NProgress.done();
+    });
+
     initNavbar();
     initArticeMenu();
     initScrollMenu();
@@ -187,9 +195,9 @@ $(function () {
     $(".showImage").fancybox();
 
     $(document).ajaxStart(function () {
-        $("#loading").show();
+        NProgress.start();
     }).ajaxStop(function () {
-        $("#loading").hide();
+        NProgress.done();
     });
 
     if ($("#scrolldiv")) {

blog-web/src/main/resources/templates/layout/footer.ftl

@@ -95,13 +95,6 @@
     </div>
     <small class="font-bold"> </small>
 </div>
-<div id="loading">
-    <div class="filter"></div>
-    <div class="loader">
-        <div class="loading-1"></div>
-        <div class="loading-2">Loading...</div>
-    </div>
-</div>
 <div class="clear blog-footer">
     <div class="container">
         <div class="col-xs-12 col-sm-4 col-md-4 text-left fade-in">
@@ -154,7 +147,8 @@
 <script type="text/javascript" src="https://cdn.bootcss.com/fancybox/2.1.5/jquery.fancybox.min.js"></script>
 <script type="text/javascript" src="https://cdn.bootcss.com/jquery.bootstrapvalidator/0.5.1/js/bootstrapValidator.min.js"></script>
 <script type="text/javascript" src="https://cdn.bootcss.com/js-xss/0.3.3/xss.min.js"></script>
-<script src="https://cdn.bootcss.com/mustache.js/2.3.0/mustache.min.js"></script>
+<script type="text/javascript" src="https://cdn.bootcss.com/nprogress/0.2.0/nprogress.min.js"></script>
+<script type="text/javascript" src="https://cdn.bootcss.com/mustache.js/2.3.0/mustache.min.js"></script>
 <script type="text/javascript">
     var appConfig = {
         wwwPath: '${config.siteUrl}',

blog-web/src/main/resources/templates/layout/quote.ftl

@@ -4,5 +4,6 @@
     <link href="https://cdn.bootcss.com/jquery-confirm/2.5.1/jquery-confirm.min.css" rel="stylesheet">
     <link href="https://cdn.bootcss.com/fancybox/2.1.5/jquery.fancybox.min.css" rel="stylesheet">
     <link href="https://cdn.bootcss.com/jquery.bootstrapvalidator/0.5.1/css/bootstrapValidator.min.css" rel="stylesheet">
+    <link href="https://cdn.bootcss.com/nprogress/0.2.0/nprogress.min.css" rel="stylesheet">
     <link href="${config.staticWebSite}/css/zhyd.core.css" rel="stylesheet" type="text/css">
     <link href="${config.staticWebSite}/css/zhyd.comment.css" rel="stylesheet" type="text/css">
\ No newline at end of file

docs/html/web/css/zhyd.core.css

@@ -1107,113 +1107,6 @@ article .entry-more a:hover, .tag-li a:hover {
     width: auto !important;
 }*/
 
-/*loading*/
-#loading {
-    outline: 0;
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    z-index: 99999;
-    display: none;
-    width: 100%;
-    height: 100%;
-}
-
-#loading .filter {
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    background: url(../img/loading.png) no-repeat fixed;
-    background-size: cover;
-    opacity: 0.7;
-}
-
-#loading .loader {
-    position: absolute;
-    left: 50%;
-    top: 50%;
-    width: 250px;
-    height: 100px;
-    margin-left: -125px;
-    margin-top: -50px;
-}
-
-#loading .loader .loading-1 {
-    position: relative;
-    width: 100%;
-    height: 10px;
-    border: 1px solid #69d2e7;
-    border-radius: 10px !important;
-    animation: turn 4s linear 1.75s infinite;
-}
-
-#loading .loader .loading-1:before {
-    content: "";
-    display: block;
-    position: absolute;
-    width: 0%;
-    height: 100%;
-    background: #69d2e7;
-    box-shadow: 10px 0px 15px 0px #69d2e7;
-    animation: load 2s linear infinite;
-}
-
-#loading .loader .loading-2 {
-    width: 100%;
-    position: absolute;
-    top: 10px;
-    color: #69d2e7;
-    font-size: 22px;
-    text-align: center;
-    animation: bounce 2s linear infinite;
-}
-
-@keyframes load {
-    0% {
-        width: 0%;
-    }
-    87.5%, 100% {
-        width: 100%;
-    }
-}
-
-@keyframes turn {
-    0% {
-        transform: rotateY(0deg);
-        -ms-transform: rotateY(0deg); /* IE 9 */
-        -moz-transform: rotateY(0deg); /* Firefox */
-        -webkit-transform: rotateY(0deg); /* Safari 和 Chrome */
-        -o-transform: rotateY(0deg); /* Opera */
-    }
-    6.25%, 50% {
-        transform: rotateY(180deg);
-        -ms-transform: rotateY(180deg); /* IE 9 */
-        -moz-transform: rotateY(180deg); /* Firefox */
-        -webkit-transform: rotateY(180deg); /* Safari 和 Chrome */
-        -o-transform: rotateY(180deg); /* Opera */
-    }
-    56.25%, 100% {
-        transform: rotateY(360deg);
-        -ms-transform: rotateY(360deg); /* IE 9 */
-        -moz-transform: rotateY(360deg); /* Firefox */
-        -webkit-transform: rotateY(360deg); /* Safari 和 Chrome */
-        -o-transform: rotateY(360deg); /* Opera */
-    }
-}
-
-@keyframes bounce {
-    0%, 100% {
-        top: 10px;
-    }
-    12.5% {
-        top: 30px;
-    }
-}
-
-/*loading*/
-
 .li-icon {
     background: #ccc;
     font-size: 14px;