Question

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

第1列（左）：垂直图像
第2栏（中）：主要内容
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>

Answer 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(); ?>

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

有关详细信息，请参阅有关ob_start的PHP手册文档：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

即使是基于表格的布局也应该验证，因为它使浏览器渲染更容易预测，并且更容易捕获bug。

Answer 2

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

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

加载主内容后，PHP包含内容加载

2 个答案: