Question

我有一个包含4列的页面，每列都由jQuery Ajax调用。每个人也是手风琴。

我想要隐藏所有内容（可能在整页“加载”屏幕后面），直到绘制完所有内容，特别是手风琴的功能完成，这样页面就不会显得一团糟。

我尝试添加

$('body').css('display', 'none');

在呼叫之前

然后

$('body').css('display', 'block');

之后却没有做任何事情。

代码：

$(document).ready(function() { 
    $('body').css('visibility', 'hide');
    $("#boards").load("boards.php?id=<?php echo $id; ?>");          
    $("#components").load("components.php");    
    $("#activities").load("activities.php"); 
    $("#tasks").load("tasks.php");
    $('body').css('visibility', 'show'); 
});

Answer 1

在屏幕上显示加载程序以隐藏其他内容。创建一个变量，在ajax之前用0初始化它。在每个ajax成功函数内部增加相同的变量。

在ajax之后，写一个setInterval函数并在该函数中检查变量是否等于4.如果是，则只删除或隐藏加载器。

Answer 2

您可以在页面顶部放置一个全屏div，并在加载完所有内容后将其删除。

CSS：

#full-loader
{
    position: absolute;
    width: 100vw;
    height: 100vh;
    background-color: black;
    top: 0;
    left:0;
    z-index: 9001;
}

HTML：

<div id="full-loader">
    <h1>Loading ...</h1>
</div>

JS：

$('#full-loader').hide(); // Only hides the div in case you want to reuse it
$('#full-loader').remove(); // Removes the div

Answer 3

如果您在head中加载jQuery并且在preload div之后立即编写$('#preload').hide();，那么不要试图低估其他答案，那么其他答案也会正常工作，但在我看来，如果你在jQuery中包含jQuery

页面的底部然后您尝试显示预加载器div是无用的，因为DOM已经加载。

但是如果您在结束body标记之前在页面底部加载jquery和js代码，那么我认为你最好这样做：

<强> CSS：

#preload{
        width:100%;
        height:100%;
        position:fixed;
        background-color:#222;
        display:none;
        color:#EEE;
        font-size:4em;
        text-align:center;
        padding-top:200px;
        z-index:1000;
    }

<强> HTML：

<body>
    <div id="preload">...Loading...</div>
    <script>document.getElementById("preload").style.display = "block";</script>

    <!-- .......... Your content here ........ -->

    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script>
        $('#preload').hide();
    </script>
</body>
</html>

使用上面的代码，将#preload放在body之后作为第一个孩子，然后在原始javascript之后我们将其display转换为block - < em>考虑到你要在你的页面底部加载jquery，它在这个阶段没有被加载，所以如果你使用jquery那么它将无法工作因此为什么原始JS - 当你到达在您的网页底部，您可以使用.hide()触发display返回none，或者Heru-Luin提到您可以使用.remove()将其删除。当然你仍然可以使用原始的javascript来做同样的事情。

Jquery \ PHP隐藏页面呈现，直到所有准备就绪

3 个答案: