Question

我有以下代码：

<div ng-cloak ng-init="viewAlbum()" class="ng-cloak">


<h3 ng-cloak class="ng-cloak" ng-bind="album.Title"></h3>    


<table ng-cloak class="ng-cloak">

    <tr>
        <td class="label-col"><span class="album-label">Composer</span></td>
        <td class="value-col">{{album.Composer}}</td>
    </tr>

    <tr>
        <td class="label-col"><span class="album-label">Release Year</span></td>
        <td class="value-col">{{album.ReleaseYear}}</td>
    </tr>

    <tr>
        <td class="label-col"><span class="album-label">Rating</span></td>
        <td class="value-col">{{album.Rating}}</td>
    </tr>

    <tr>
        <td class="label-col"><span class="album-label">Reviews</span></td>
        <td class="value-col">
            <ol>
                <li ng-repeat="review in album.Reviews">{{review.Text}}</li>
            </ol>
        </td>
    </tr>


</table>

问题是我在页面加载时看到快速闪烁。我没有看到原始未处理的角度代码。相反，整个表格会闪烁，包括标签等静态文本。

我做了一些实验 - 当我删除H3标签时，我不再看到闪烁。因此，我相信正在发生的事情是H3标记最初是在没有值的情况下呈现的，因此不会占用任何垂直空间。当渲染专辑标题的值时，该表被按下，这是导致闪烁的“下推”。然而，我的理论可能是错的。

ng-clock属性不能减轻这种影响。我尝试了一个详细的选项，即围绕容器H3中的DIV标记并设置css中DIV的高度和最小高度，但这也不会阻止闪烁。

正如我所说，如果删除H3标签，则没有闪烁。有什么建议吗？

Answer 1

如下面的链接中所述，您可以使用display：inline-block将h2 / h3标记包装在div中。像这样：

<div class="header2"><h3></h3></div>

然后将其添加到您的css：

.header2 { min-width: 100px; width: auto; min-height:45px; background-color:#333; color:#FFF; display:inline-block; padding:10px; }

这是两个具有上述属性的h2标签：jsfiddle：https://jsfiddle.net/AndrewL32/e0d8my79/21/

检查：How do I make an inline element take up space when empty?

我建议您也为所有doms使用ng-bind并删除ng-cloak

卸载的标题标签导致闪烁

1 个答案: