Question

我有一个包含非常大的表的页面，我想在加载表之前显示加载动画。目前我正在使用以下解决方案。直到<body>我有一个div：

<div id="loading"></div>

在</body>之前的页面末尾，我正在使用以下JS：

$(document).ready(function(){
    $('#loading').fadeOut();
});

问题是，在firefox中，页面似乎在显示之前完全加载。因此，如果我在网页上并单击指向我的表的链接，则firefox只处理几秒钟，然后显示包含该表的整个页面。 “加载<div>”只是闪烁很短 - 因为页面加载速度非常快。当Firefox正在处理页面时，如何解决这个问题并显示我的加载div？

Answer 1

这可能会有所帮助：

$(document).ready(function(){
    $('#loading').fadeOut();
    $('.tables').css('display', 'none').fadeIn('slow');
});

它会给你一种微妙的装载错觉。

Answer 2

使用div #loading加载信息/ .gif，其中包含您的所有网页：

<div id="loading">
     <img src="loading.gif" alt="Loading" />
     Loading...
</div>

<强> jQuery的：

$(window).load(function(){

   // PAGE IS FULLY LOADED  
   // FADE OUT YOUR LOADING DIV
   $('#loading').fadeOut();

});

而不是$(document).ready()使用$(window).load

Answer 3

将此添加到页面的标题

$(window).load(function() {
   $("#loading").fadeOut();
});