Question

是否可以在我的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>

页面加载然后显示叠加消息。

如何在加载时显示消息？

由于

Answer 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的{{1}}正在传递给id="domMessage函数，用于显示消息。

更新：

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

blockUI

页面加载查询

1 个答案: