确保浏览器一次显示所有内容答案

【问题标题】：Make sure that the browser displays everything at once确保浏览器一次显示所有内容
【发布时间】：2012-10-15 20:07:54
【问题描述】：

我的这个网站包含大量图像和文本，并且在连接速度慢、互联网浏览器或 RAM 低的计算机上，首先加载文本，然后加载图像需要一段时间。如何确保同时显示所有内容？

我想到的解决方案：

输出缓冲 - 我的 PHP 脚本顶部和底部的 ob_start 和 ob_end_flush 以确保在处理脚本之前没有发送任何内容。
将整个 DOM 加载到 Javascript 变量中，然后在全部加载完毕后将其回显。

您认为哪种方式最适用于所有浏览器，甚至适用于速度较慢的计算机？我还没有在具有不同速度和 RAM 的各种平台和计算机上对其进行测试。如果您有媒体重网站的经验或有更好的方法，请告诉我要采取的路径。

【问题讨论】：

不要坐在浏览器制造商的椅子上。保持一切尽可能小，浏览器将异步加载大部分内容
唯一的解决方案是在window.onload 之后隐藏您的整个页面，但这可能会导致用户离开您的网站，因为他们必须等待多长时间才能访问您的内容。解决此问题的更好方法是通过优化图像、用 css 样式替换图像、在必要时在图像精灵中组合图像等来减少图像对页面加载的影响。
你为什么要这个？愿用户体验之神来打败你。
考虑将图像组合成精灵。这将显着提高性能。发出了多少图像 HTTP 请求？所有图片都在同一个域中吗？
分析页面vie gtmetrix.com

标签： php javascript jquery html dom

【解决方案1】：

如果您有能力依赖 JavaScrip，有一个简单而有效的解决方案一次显示所有内容。

在整个窗口的顶部放置一个白色层。这会隐藏所有内容。
使用事件window.onload隐藏/移除覆盖层。
使用事件window.onunload 再次显示隐藏层。

图层：

    ...
    <style>
        html, body{ height: 100%; }
        #hiding {
            display:    block;
            width:      100%;
            height:     100%;
            position:   absolute;
            top:        0;
            left:       0;
            background: #fff;
        }
    </style>
</head>
<body>
    <div id="hiding"></div>
    ...

JavaScript 事件：

        ...
        <script>
            window.onload = function () {
                document.getElementById('hiding').style.display = 'none';
            };
            window.onunload = function () {
                document.getElementById('hiding').style.display = 'block';
            };
        </scritp>
    </body>
</html>

注意：请勿将这些样式或 JavaScript 代码放入外部文件中。

注意 2：最好在隐藏层的中间放置一个加载微调器。您可以将此添加到#hiding { ... } 样式块：background: #fff url(/images/spinner.gif) center center;

【讨论】：

【解决方案2】：

当 php 结束时，它会输出 HTML 代码，并在其中输出图像源路径（以及 css、js 等文件）。然后，浏览器将开始新的请求以获取页面所需的外部内容。 .

如果您尝试一次打印所有内容（一旦图像和其他资源完全加载），那么您可以使用 css 和 js 来执行此操作..

使用 css，您可以隐藏页面的“主包装器”，使用 display: none 规则。如果您愿意，您可以使用“加载”文本或基于 gif 的图像来向最终用户显示页面是正在加载中..

然后，在 javascript 中实现 window.onload 回调（不是 jquery 就绪事件）。一旦 dom 准备好并且所有资源都已完全加载，Window.onload 事件将触发。 You can see this explained in second paragraph

然后，在那个 onload 回调中，您只需要显示：阻止隐藏的“主包装”内容，并删除或隐藏“正在加载”消息。

【讨论】：

【解决方案3】：

在 CDN 中托管您的图片
使用像 timthumb 这样的图像或页面缓存
使用 javascript 或 jquery 预加载图片
使用 div 或 section 而不是表格进行布局。（我记得那些旧学校网站以及它们是如何加载的）
使用渐进式图像格式
GZIP 压缩

【讨论】：

+1 用于在 CDN 上托管图像（或以其他方式将请求拆分到多个主机）
他说Lol...I'm doing this because when the page is loading on those computers i've mentioned, it looks like a human being being formed from the skeleton to the meat slowly
所有这些规则都很好，但不会立即显示所有内容。

【解决方案4】：

当浏览器请求 HTML 文档时，它会触发 HTTP 调用。然后它开始检查页面内容，当它找到外部资源（css 文件、脚本、图像）时，它会发出 其他异步 HTTP 请求（通常不超过 2 个到同一服务器），当资源被成功检索（甚至之前，如果它是一个 CSS），它开始检查它。

所以在 PHP 端你无能为力（缓冲输出？为什么你认为它应该工作？）

如果您的应用程序需要在启动前加载资源（例如，它就像一个带有加载屏幕的游戏），您必须自己管理它。例如，您的主 HTML 文档将仅包含一个 JS 文件，该文件又将下载资源。当所有资源（本例中的图像，加上一些文本文件）都已加载后，脚本将构建页面（同样，您可能会发现一些技巧来回收现有技术，如 DOM，但仅此而已完全取决于你）。

为了加快图像的检索速度，您可以使用高速服务器 (CDN)，或者（如果合适的话甚至更好），您可以将所有图像组合成一个大的，并在客户端拆分它。如果您的应用是真正的游戏，这通常会用到。

【讨论】：

+1 for sprites... 在 CDN 和使用 sprites 之间，它将显着减少交错加载。 sprites会保证所有图片同时显示，CDN会允许客户端同时下载多个依赖文件...