2

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

我想到的解决方案：

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

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

4

4 回答 4

7

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

  1. 在整个窗口的顶部放置一个白色层。这隐藏了所有内容。
  2. 使用事件window.onload隐藏/移除覆盖层。
  3. 使用事件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;

于 2012-10-25T16:23:22.513 回答
2
  1. 在 CDN 中托管您的图像
  2. 使用图像或页面缓存，如 timthumb
  3. 使用 javascript 或 jquery 预加载图像
  4. 使用 div 或 section 而不是表格进行布局。（我记得那些旧学校网站以及它们是如何加载的）
  5. 使用渐进式图像格式
  6. GZIP 压缩
于 2012-10-25T15:33:02.933 回答
2

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

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

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

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

于 2012-10-25T15:37:53.027 回答
2

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

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

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

然后，在 javascript 中实现 window.onload 回调（不是 jquery 就绪事件）。一旦 dom 准备好并且所有资源都已完全加载，Window.onload 事件将触发。您可以在第二段中看到这一点

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

于 2012-10-25T15:40:38.517 回答