页面加载查询答案

【问题标题】：Page Loading Query页面加载查询
【发布时间】：2013-09-10 15:32:55
【问题描述】：

是否可以在我的 php 页面执行其他操作之前显示覆盖，然后继续加载页面。

一旦页面完全加载，然后移除覆盖？

理想情况下，叠加层应该有一个图标和/或显示页面正在加载的措辞。

我尝试过的一切似乎都没有任何作用！

谢谢

编辑：

这是我正在尝试做的基本版本..

<html>
<head>
<script src="jquery-1.8.0.js" type="text/javascript"></script>
<script src="jquery.blockUI.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
    // Blocks as soon as possible
    $.blockUI({ message: $('#domMessage') });

    // Wire up page load event
    $(window).load(function () {
        // Unblock when page is loaded
        $.unblockUI;
    });
});
</script>
</head>
<body>

<?php
$out = array();
exec ('ls -ls /* 2>&1', $out);
echo "<table>";
foreach ($out as $line) {
    echo "<tr><td>$line</td></tr>";
}
echo "</table>";
?>

<input id="pageDemo1" class="demo" type="submit" value="Block Page With Message" />
<div id="domMessage" style="display:none;">
    <h1>We are processing your request.  Please be patient.</h1>
</div>
</body>
</html>

页面加载后显示覆盖消息。

如何让它在加载时显示消息？

谢谢

【问题讨论】：

您究竟尝试过哪些不起作用的方法？

标签： php jquery overlay loading

【解决方案1】：

jQuery BlockUI 过去对我来说效果很好。

您可以将其应用于元素或整个页面，如下所示：

<script type="text/javascript"> 
    // unblock when ajax activity stops 
    $(document).ajaxStop($.unblockUI); 

    function test() { 
        $.ajax({ url: 'wait.php', cache: false }); 
    } 

    $(document).ready(function() { 
        $('#pageDemo1').click(function() { 
            $.blockUI({ message: $('#domMessage') }); 
            test(); 
        });
    }); 
</script> 

<input id="pageDemo1" class="demo" type="submit" value="Block Page With Message" />
<div id="domMessage" style="display:none;"> 
    <h1>We are processing your request.  Please be patient.</h1> 
</div>

注意：DIV 和 id="domMessage 被传递给 blockUI 函数并用于显示消息。

更新：

以下是如何在 DOM 可用时立即显示加载消息，然后在页面加载时隐藏消息：

$(document).ready(function() { 
    // Blocks as soon as possible
    $.blockUI({ message: $('#domMessage') });

    // Wire up page load event
    $(window).load(function () {
        // Unblock when page is loaded 
        $.unblockUI; 
    }); 
});

【讨论】：

不错的选择。然而这部分我不了解$.ajax({ url: 'wait.php', cache: false }); 关于wait.php 文件。你能告诉我那个文件是做什么用的吗？我阅读了文档，但无法理解它。
哦，这只是来自 jQuery BlockUI 站点的示例，它只是 PHP 脚本中的延迟，因此示例中会显示叠加层。随意取出 function test() 部分和对它的调用 (test()) 并将您想要发生的任何事情放入事件处理程序中。
我不是提出这个问题的人 Karl，但我很乐意投票。 ;-)
@Fred-ii- - 大声笑，对不起，我的错，需要密切注意名字，只是认为你是 OP。
哈哈哈没问题，这发生在我们最好的人身上 ;-) 我浏览问题，看看我是否可以提供帮助，有时我看到一个很好的问题，答案可能有用对我来说。给你+1