Ионная виртуальная прокрутка: экран быстро исчезает при быстрой прокрутке

Question

Я использую виртуальную прокрутку для оптимизации большого списка элементов (630 элементов), которые я отображаю на своей домашней странице.

Единственная причина, по которой я решил использовать виртуальную прокрутку, заключается в том, что загрузка страницы без виртуальной прокрутки занимает около 1 секунды. Я подозреваю, что это потому, что без виртуальной прокрутки все 630 ячеек создаются и помещаются в DOM до отображения страницы, а не только ячейки в области просмотра. Это приводит к запаздывающему, плохому взаимодействию с пользователем, поскольку эта страница просматривается много раз.

Использование виртуальной прокрутки полезно, поскольку ускоряет навигацию. Однако экран прокручивается при прокрутке, поскольку виртуальная прокрутка пытается поддерживать и отображать ячейки по требованию. Я попытался изменить атрибут отношения буфера, чтобы создать больше ячеек заранее и уменьшить эффект «белого», но это, похоже, не помогает.

Как я могу исправить этот эффект "white out"? Есть ли способ ограничить скорость прокрутки, чтобы позволить виртуальной прокрутке идти в ногу? Или есть лучший способ уменьшить время загрузки моей страницы без использования виртуальной прокрутки?

Вот мой код:

home.html

  <div style="height:100%">
    <ion-list [virtualScroll]="displaySongs" [approxItemHeight]="'62px'" [bufferRatio]="7">
      <button *virtualItem="let song; let i = index;"
        ion-item clear class="hymns-list-item"
        [navPush]="songPage" [navParams]=song>
          <h4 class="song-title">
              <span class="song-number">{{song.number}}</span>&nbsp;&nbsp;{{ song.title }}
          </h4>
          <small class="song-genre">{{song.category}}</small>
      </button> 
    </ion-list>
  </div>