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

Question

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

我在标题中添加了一个 div，并添加了一个 css 类和 jquery 来隐藏 div。 添加在标题中

<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”

这是工作 sn-p 的答案。

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