Question

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

我想要的是在用户点击重新加载图标或点击输入或F5或ctrl + f5页面重新加载后立即使用加载程序。希望我清楚自己。

Answer 1

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

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

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

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

可能会帮助你。

显示加载器，直到浏览器加载图标正在旋转

1 个答案: