Question

我的网站图像和文字都很重，慢速连接，互联网浏览器或RAM较低的计算机首先加载文本，然后图像需要一段时间才能加载。我怎样才能确保所有内容同时显示出来？

我想到的解决方案：

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

您认为哪种方法适用于所有浏览器，甚至是慢速计算机？我没有在各种平台和具有不同速度和RAM的计算机上进行测试。如果您有媒体大型网站的经验或有更好的方法，请告诉我要走哪条路。

Answer 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;

Answer 2

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

Answer 3

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

所以你可以在PHP方面做什么（缓冲输出？为什么你认为它应该有效？）

如果您的应用程序需要在启动之前加载资源（例如，它就像带有加载屏幕的游戏），您必须自己管理它。例如，您的主HTML文档将仅包含一个JS文件，而该文件又将下载资源。当所有资源（在这种情况下的图像，加上一些文本文件）已经加载时，脚本将构建页面（再次，您可能会发现一些技巧来回收现有技术，如DOM，但那是绝对取决于你。）

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

Answer 4

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

如果你想一次打印一次（一旦图像和其他资源完全加载），那么你可以用css和js来做...

使用css，你可以隐藏页面的“主要包装”，显示：无规则..如果你愿意，你可以有一个“加载”文本或基于gif的图像，以向最终用户显示该页面是目前正在加载..

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

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

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

4 个答案: