Question

我想向用户显示他想要访问的文档正在装货，尚未准备好。

我希望在网页完全加载时显示该网页。

我用

$(document).ready(function(){});

准备好文件。我应该怎么办？

Answer 1

要做的第一件事就是问为什么页面加载速度太慢以至于你觉得你需要加载横幅，并尽一切可能来修复它。

如果由于相关网页的性质而导致无法解决问题，则下一个考虑因素是确保只有启用了JavaScript的用户才会显示“正在加载”横幅（因为我们稍后会删除它）使用JavaScript，所以将它放在那里然后如果它们没有JavaScript则不删除它会有点意思。这可能是document.write语句中为数不多的有效剩余用法之一（并且仅当您未使用XHTML时，因为它在XHTML中无效）：

<body>
<script>
document.write("<p id='loading'>Loading...</p>");
</script>

...你用CSS设计的风格，大概是：

#loading {
    position:         absolute;
    left:             0px;
    top:              0px;
    background-color: #ddd;
    /* ... */
}

然后在您的ready处理程序中删除它：

$('#loading').remove();

如果你正在使用XHTML（或者你原则上不想使用document.write），你可以在没有document.write的情况下做类似的事情，如下所示：

<body>
<script>
    (function() {
        var p = document.createElement('p');
        p.id = 'loading';
        p.innerHTML = "Loading...";
        document.body.appendChild(p);
    })();
</script>

Live example（在Windows上测试IE6 / 7/8;在Windows上测试Safari;在Linux和Windows上测试Chrome，Opera和Firefox。）

Answer 2

在代码的开头用加载文本/动画写一些元素，然后在文档就绪时用javascript删除或隐藏该元素。可能需要一些输出缓冲才能立即显示加载消息。

$(function() {
    $("#loading_element").hide();
});

文档未准备好时显示加载

2 个答案: