如何创建加载程序，当从一个页面导航到另一个页面不起作用时

Question

我在一个项目中工作，我需要一个加载器，当我们将一个页面导航到另一个页面时，加载器将显示，当完全加载时，页面加载器应该隐藏，当我导航它正在工作的页面时，它正在工作但不隐藏，当页面完成加载时。

我在 header 中添加了一个 div 和一个 css class 和 jquery 来隐藏 div。添加于 header

<div class="loader">  </div>

Added in footer 
<script type="text/javascript">
        $(window).on("load", function (e) {
            $(".loader").fadeout("slow"); 

        })
</script>

Added css
.loader{position:fixed;left:0;top:0;width:100%;height:100%;z-index:9999;background:url(../images/loader.gif) 50% 50% no-repeat #fff;opacity:.80;
}

它在导航到页面时不断显示，我希望它在页面加载时隐藏。

Answer 1

这是你犯的一个小错误，这就是不断显示加载程序的原因。

淡出应该是"fadeOut"

这是工作片段的答案。

$(window).on("load", function (e) {
            $(".loader").fadeOut("slow"); 

        })

.loader{position:fixed;left:0;top:0;width:100%;height:100%;z-index:9999;background:url(https://icon-library.net/images/loading-icon-animated-gif/loading-icon-animated-gif-19.jpg) 50% 50% no-repeat #fff;opacity:.80;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="loader">  </div>

<a href="#">Home</a>

<a href="#">About</a>

如何创建加载程序，当从一个页面导航到另一个页面不起作用时

How to create loader, when navigating from one page to another page not working

css

navigation

jquery

loader