页面加载查询

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>

注意：具有id="domMessage的DIV被传递给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; 
    }); 
});

页面加载查询

问题描述

1 个解决方案

解决方案1
1 已采纳 2013-09-10 15:35:58

页面加载查询

问题描述

1 个解决方案

解决方案1 1 已采纳 2013-09-10 15:35:58

解决方案1
1 已采纳 2013-09-10 15:35:58