Question

我想在加载时将加载的gif叠加到我的页面内容上。它们不是通过ajax加载的，但我已经看到了几种通过该通道显示的解决方案。问题是jQuery表中填充了搜索结果，如果通过MySql返回大量结果，表可能需要花费相当长的时间来呈现。我想在页面上覆盖一层隐藏javascript和jQuery的渲染。有人可以解释如何完成这个或指向我一个伟大的教程。请记住，页面内容不是从外部源加载的（减去用PHP变量填充的数据库值）。

感谢您的帮助！

Answer 1

如果你有一个包装器div，添加display:none or opacity:0和包装器div放入spinny loader。

不在你的jQuery中添加如下内容：

$(document).ready(function(){
    $('#wrapper').show();
});

您也可以添加一些动画而不是show()

Answer 2

试试这个

.loading
{
    background-image: url('loadingImage.png');
    background-color: #FFFFFF;
    border: 1px solid #CCCCCC;
    color: #000000;
    padding: 10px 30px;
    position: absolute;
    text-align: center;
    width:100px;
    z-index:100;
}

$(document).ready(function(){
    $('#wrapper').append("<div class='loading' />").fadeIn();
});

Answer 3

如果您正在等待服务器完成计算页面并且您正在使用PHP，那么您可以使用PHP函数ob_flush（）来刷新输出缓冲区。

提供html代码以显示加载程序，然后刷新缓冲区。然后运行需要一些时间的数据库查询。您可以经常刷新缓冲区，也可以在加载进度上提供状态更新。

在页面加载时显示加载微调器

3 个答案: