加载完成后显示HTML页面

Question

加载完成后显示HTML页面

javascripthtmlbrowser

35

是否有一种方法可以强制浏览器在所有页面内容完全加载（例如图片、脚本、CSS等）后才显示页面？

- Rana

3

我喜欢在页面完全加载之前就能开始阅读，特别是当我的网络连接速度较慢时。 - Matti Virkkunen

6

可能不是你所想的那么多（包括脚本），而且我认为这听起来设计不良。你为什么想这样做？ - tdammers

2

@tdammers为什么这会是个糟糕的设计？例如，如果页面根据<html lang="en">本地化，并且在加载过程中通过JS更改语言以按照浏览器语言进行设置等，则您会看到几毫秒的英文全文，然后才会更改为定义的语言。另一个例子是在文本中具有占位符，必须在JS中替换，产生相同的效果。 - David

5个回答

8

在页面上添加叠加层。

#loading-mask {
    background-color: white;
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 9999;
}

然后在window.onload处理程序中删除该元素，或者将其隐藏。

window.onload=function() {
    document.getElementById('loading-mask').style.display='none';
}

当然，如果你使用了javascript库（如jquery、prototype等），那么在使用库的情况下应该使用特定的onload处理程序。

- aularon

1

另外，如果禁用了JavaScript，这根本不会显示页面...请参考@Pekka的答案，那里有更安全的解决方案。 - Tao

@Tao，你可以使用 Modernizer 来判断浏览器是否为 IE6 或 JavaScript 是否已禁用。 - Dhaval Chheda

7

初始时隐藏正文，等待jQuery加载后再显示。

body {
    display: none;
}

$(function () {
    $('body').show();
}); // end ready

此外，最好将$('body').show();放在您的最后一个主要的.js文件的最后一行。

- BlekStena

5

你也可以选择这种方式……只有在 JavaScript 加载完成后才会显示 HTML 部分。

<!-- Adds the hidden style and removes it when javascript has loaded -->
<style type="text/css">
    .hideAll  {
        visibility:hidden;
     }
</style>

<script type="text/javascript">
    $(window).load(function () {
        $("#tabs").removeClass("hideAll");
    });
</script>

<div id="tabs" class="hideAll">
   ##Content##
</div>

- JGilmartin

1

$(window).on("load", function() { （如果您使用的是 jQuery 3） - kikulikov

0

尝试使用JavaScript吧！似乎这是做这件事的最好、最简单的方法。你将获得内置函数，只有在HTML页面完全加载后才能执行HTML代码。

否则，你可以使用基于状态的编程，在浏览器的特定状态下触发事件。

- Noddy Cha

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Pekka · Accepted Answer

最简单的方法是在 body 中添加一个具有以下 CSS 的 div：

#hideAll
 {
   position: fixed;
   left: 0px; 
   right: 0px; 
   top: 0px; 
   bottom: 0px; 
   background-color: white;
   z-index: 99; /* Higher than anything else in the document */

 }

(请注意，在IE6中position: fixed不起作用 - 我不知道如何在该浏览器中保证100%生效)

像这样添加DIV（直接在开头的body标签后）：

<div style="display: none" id="hideAll">&nbsp;</div>

显示紧接着此元素后面的 DIV：

 <script type="text/javascript">
   document.getElementById("hideAll").style.display = "block";
 </script>

并在 onload 时隐藏它：

 window.onload = function() 
  { document.getElementById("hideAll").style.display = "none"; }

或者使用jQuery

 $(window).load(function() {  document.getElementById("hideAll").style.display = "none"; });

这种方法的优点是它也适用于关闭JavaScript的客户端。它不应该引起任何闪烁或其他副作用，但由于没有测试过，我不能完全保证每个浏览器都能正常工作。