Как предварительно загрузить изображения внутри вкладок ngb (Angular 7 + ngBootstrap)?

Изображения в моем ngb-tabset загружаются после того, как пользователь переходит на другую ngb-tab. На практике это выглядит так: после щелчка вы видите фон примерно на 100 мс, а затем появляется изображение (так же, как стили, такие как отступы и поля, и все немного перемещается).

Я не пробовал использовать методы "css" предварительной загрузки изображений, потому что некоторые комментарии показывают, что они не совместимы с Angular.

Я попытался установить фиксированную высоту div (чтобы элементы не мерцали), но это не то, что я ожидал.

    <ngb-tab>
    <ng-template ngbTabTitle><span class="tab-title" translate>home.step-one-header</span></ng-template>
        <ng-template ngbTabContent>
          <div class="col pb-5 pt-0 my-1 bg-white">
            <h1 class="shady">#1</h1>
            <div class="icon-box">
              <img src="../../assets/home/storage.png" class="p-4 icon">
            </div>
            <br>
            <div class="description-box" translate>
              home.step-one-description
            </div>
            <br>
          </div>
        </ng-template>
      </ngb-tab>

Я ожидаю, что изображения загружаются во время загрузки приложения. Я хочу избежать мерцания и загрузки изображений, когда пользователь перемещается по ngb-tabset.

0 ответов

Другие вопросы по тегам