0

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

第 1 列（左）：垂直图像
第 2 列（中）：主要内容
3d 列（右）：垂直图像

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

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

索引.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>

垂直.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>
4

2 回答 2

3

虽然我建议探索更现代的 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”加载了标签。脚本标签在加载和处理它们时会延迟所有其他加载，这就是为什么建议尽可能异步添加它们的原因。如果它们无法异步加载，则应将它们包含在结束标记内或正上方。

有关脚本问题的更多信息，请参阅： HTML 中的 <script> 标记位置会影响网页的性能吗？

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

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

于 2012-11-03T15:25:45.620 回答
0

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

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

于 2012-11-03T10:43:19.543 回答