加载主要内容后加载 PHP 包含的内容答案

【问题标题】：PHP included content loads after main content is loaded加载主要内容后加载 PHP 包含的内容
【发布时间】：2012-11-03 08:52:39
【问题描述】：

在我的网站上：www.metallica-gr.net 您可以看到主表有 3 列。

第一列（左）：垂直图像
第二栏（中）：主要内容
3d 柱（右）：垂直图像

问题是，因为右图位于代码的底部（因为它是表格的最后一列），它会等待主要内容加载后才出现。所以在网站加载之前它看起来很乱，因为布局的只有一个边框出现。

我不能为此使用 div，因为我已经制作了很多 html 页面，而且当我尝试时也没有成功。有没有什么办法解决这一问题？代码如下：

index.html：

<table border="0" cellspacing="0" cellpadding="0" id="main" align="center">
      <tr>
        <td width="2" valign="top"><?php include "vertical.php"?></td>
        <td valign="top" style="vertical-align:top;">
    <div><?php include "main.html"?></div></td>
        <td width="2" valign="top"><?php include "vertical.php"?></td>
      </tr>
    </table>

vertical.php：

<div style="background-image:url(images/vertical.jpg); width:2px; height:100%; background-repeat:repeat-y; vertical-align:top; position:fixed; top:0;"></div>

【问题讨论】：

你在.html文档中使用include()吗？
您正在使用表格进行布局。强烈不建议这样做，并且在不久的将来会让您非常头疼。
@Kumar - 你是什么意思？使用的代码在上面。 - Uchiha 正如我所说，我尝试了 div 方法，但我遇到了一些问题。通过使用表格作为特定网站的布局，我没有发现任何其他问题。如果有人可以推荐解决方案，请告诉我。
嗨，Zefs，您指的是共享按钮部分吗？而且你想加载页面加载的那部分，而不是最后，对吧？
不，不是那样。表格边框（布局的左右图像）。右一个在加载主要内容后加载，因为它的代码位于主要内容下方。

标签： php html html-table include load

【解决方案1】：

虽然我建议探索更现代的 HTML 结构（例如使用 div），但我知道有时完全重组是不可行的。

我相信 PHP 输出缓冲区可能会提供一个临时解决方案。

<?php ob_start(); ?>
<table border="0" cellspacing="0" cellpadding="0" id="main" align="center">
    <tr>
        <td width="2" valign="top"><?php include "vertical.php" ?></td>
        <td valign="top" style="vertical-align:top;">
            <div><?php include "main.html" ?></div>
        </td>
        <td width="2" valign="top"><?php include "vertical.php" ?></td>
    </tr>
</table>
<?php ob_end_flush(); ?>

这将保持页面响应，直到所有包含都已处理完毕。您还应该注意，虽然这可能会减少页面上的“洗牌”，但也可能会增加感知的加载时间。

有关更多信息，请参阅 PHP 手册关于 ob_start 的文档：http://www.php.net/manual/en/function.ob-start.php

虽然上述内容应该解决由 PHP 包含引起的任何问题，但看起来您可能还有其他一些可能的罪魁祸首。最有可能的是您从“src”加载了标签。脚本标签在加载和处理它们时会延迟所有其他加载，这就是为什么建议尽可能异步添加它们的原因。如果它们无法异步加载，则应将它们包含在结束标记内或正上方。

有关脚本问题的更多信息，请参阅： Does the <script> tag position in HTML affects performance of the webpage?

在筛选 HTML 时，我还发现了很多可能应该解决的验证错误： http://validator.w3.org/check?uri=http%3A%2F%2Fmetallica-gr.net%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

即使是基于表格的布局也应该进行验证，因为它使浏览器呈现更可预测并且更容易寻找错误。

【讨论】：

似乎对我不起作用，左侧的 php 包含图像仍然加载得更快。
上面的代码一次提供了整个表格的 HTML（而不是潜在地加载它的一部分）。如果一个包含需要一段时间来加载，你就会冒着只获得部分表结构的风险，而浏览器往往会把这些结构弄得一团糟。 2 张图片的加载方式取决于浏览器。我没有看到它们在 Chrome (screencast.com/t/DB3t9fSRpZ) 或 Firefox (screencast.com/t/mfqzyMJr6pe) 中以不同的时间间隔加载。
感谢您的截屏视频。在此示例中，您要么使用非常快的连接，要么数据存储在缓存中，因为您之前访问过该站点。如果我清除浏览器缓存并再次查看它，它确实会发生。
你用的是什么浏览器？在当前版本的 Firefox 和 Chrome 中，同一图像的所有迭代将同时加载。请参阅此处的测试jsfiddle.net/wW7hT 和此处的测试截屏视频screencast.com/t/df2HeR57Z3W（使用更大的图像来补偿连接速度）。如果您仍然在 Chrome 或 Firefox 中看到此内容，则可能还有其他原因。你能分享一下你所看到的截屏视频吗？
我尝试了所有浏览器。尽管您没有使用表结构，但在您的截屏视频中。此外，我的主要内容包含图像和脚本，因此这可能是减慢正确图像加载速度的原因。你不能只用一张图片来复制它（比如猫）。

【解决方案2】：

我认为你应该用 div 结构替换 table 结构，因为这是 table 结构的缺点，它会逐行加载每个 TR / TD，而在 DIV 结构中我们会进行不同的划分，这就是浏览器会同时加载不同划分的原因这就是为什么现在设计师更喜欢 DIV 结构的原因。

在您的情况下，它从第一个 TD 开始加载，并以最后一个 TD 结束，所以我认为 DIV 结构是您问题的解决方案。

【讨论】：