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

Posted 2023-02-22

技术标签:

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

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

我想到的解决方案：

php

ob_start

ob_end_flush

javascript

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

【问题讨论】：

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

以上是关于确保浏览器一次显示所有内容的主要内容，如果未能解决你的问题，请参考以下文章

如何确保找到我的 WebPart 并将其注册为安全的？

如何在 HTML 中显示汉字

chrome有些请求成功却没有preview和response没内容

css 在SVG文件中，确保没有内联填充颜色以确保其有效。适用于所有浏览器