显示加载器，直到浏览器加载图标旋转答案

【问题标题】：Display Loader untill the browser loading icon is rotating显示加载器，直到浏览器加载图标旋转
【发布时间】：2016-06-17 09:28:44
【问题描述】：

我有一个包含大量流量的页面。它正在从多个服务器获取数据并显示在页面中。页面完成加载通常需要 3-4 分钟。请看一些部分页面数据

我所需要的只是一个旋转的 gif 或一个加载器来越过页面，这样用户就不能点击任何链接，除非页面完全加载。

我试过下面的代码

<script language="JavaScript" type="text/javascript"  src="JavaScript/jquery-1.3.2.js"></script>
<script>
hideLoading = function() {
    $('.loading').fadeOut(20000, function() {
        $(".content").fadeIn(10000);        
    });
};
hideLoading();
</script>

HTML：

<body>
<div class="loading">Loading...</div>
<div class="content">

问题是当用户重新加载浏览器加载器旋转的页面但页面中的内容没有让我的加载器覆盖内容时。它只会在 DOM 被加载之前发生。

我想要的只是让加载程序在用户单击重新加载图标或点击 enter 或 F5 或 ctrl+f5 以进行页面重新加载时立即工作。希望我说清楚了。

【问题讨论】：

标签： javascript php jquery html

【解决方案1】：

将您的 jquery 代码放在 document.ready 函数中并对该函数进行一些延迟，如下所示：-

在页面底部添加此 jquery 代码。

$(document).ready(function(){
    hideLoading = function() {
        $('.loading').fadeOut(20000, function() {
            $(".content").fadeIn(10000);        
        });
    };

    setTimeout(function(){
        hideLoading();
    }, 1000);
});

也许对你有帮助。

【讨论】：

setTimeout ?为什么？
$(document).ready(function() 在加载 DOM 时工作，我希望在使用时点击重新加载。
你可以在卸载前设置加载器
您必须从 CSS 或使用内联 CSS 为加载器设置显示块，然后使用 jQuery 您应该在页面加载后隐藏该加载器。
请在 jsfiddle 或其他任何地方添加您的代码，以便我可以更新和更改...