Незагруженный тег заголовка, вызывающий мерцание

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 и установки высоты и минимальной высоты этого DIV в css, но это также не предотвращает мерцание.

Как я уже сказал, если я уберу тег H3, мерцание не будет.Любые предложения, пожалуйста?

Answer 1

Как упомянуто в ссылке ниже, вы можете просто обернуть тег h2 / h3 в div с помощью display: inline-block;как это:

<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; }

Вот jsfiddle из двух тегов h2 свышеуказанные свойства: https://jsfiddle.net/AndrewL32/e0d8my79/21/

Проверка: Как сделать так, чтобы встроенный элемент занимал пространство, когда пуст?

Я также рекомендую использовать ng-bind для всехваши домики и снимите нг-плащ тоже