Javascript 显示加载程序，直到浏览器加载图标旋转

我有一个网页，其中包含大量的流量。它从多个服务器获取数据并显示在页面中。页面完成加载通常需要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>

hideLoading=函数（）{
$（'.loading'）.fadeOut（20000，function（）{
$（“.content”）.fadeIn（10000）；
});
};
hideLoading（）；

HTML:

加载。。。

问题是，当用户重新加载页面时，浏览器加载程序会旋转，但页面中的内容不会让我的加载程序覆盖内容。 只有在加载DOM之后才会发生这种情况

---

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

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

在页面底部添加此jquery代码

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

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

---

它可能会对您有所帮助。

setTimeout

？为什么？

$（文档）.ready（函数（））

在加载DOM时起作用，我想在用户单击“重新加载”时起作用。您可以在“重新加载”之前设置加载程序。您必须从CSS或使用内联CSS为加载程序设置显示块，然后使用jQuery在页面加载后应隐藏该加载程序。请在JSFIDLE或任何其他位置添加代码，以便我可以更新和更改该加载程序。。。

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

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