SVG вне поля зрения не загружается, пока не отображается (Angular)?

Question

У меня есть выпадающее меню, в котором есть SVG для каждого параметра. Эти SVG находятся в моей папке assets. После загрузки страницы я нажимаю на раскрывающийся список, чтобы отобразить список (общее количество опций равно 17, а у нас только 6), и начинаю прокручивать список опций. Когда я прокручиваю и переношу другие параметры в представление, вы увидите, как всплывают SVG для этих параметров (т. Е. Параметр выглядит пустым в течение доли секунды, а затем появляется изображение SVG).

Есть ли способ чтобы предотвратить это поведение?

<ng-template #serviceSvg let-service>
    <img
      class="svg-image"
      src="/assets/images/logo-{{ service.code }}.svg"
    />
</ng-template>

<div class="service-options" *ngFor="let service of serviceOptions">
    <div class="svg-container">
        <ng-template *ngTemplateOutlet="serviceSvg; context: { $implicit: service }"></ng-template>
    </div>
</div>

.service-options {
  width: 100%;
  height: 383px;
  position: absolute;
  top: 66px;
  cursor: pointer;

  overflow-y: scroll;
}


.svg-container {
  width: 100%;
  height: 64px;
  position: relative;
  overflow: hidden;
}

.svg-service-image {
  height: 40px;
  width: auto;

  margin: auto;
}