preloader для группы изображений во вкладках

Доброго времени суток ... Второй день бьюсь над задачей реализации preloader для групп изображений во вкладках. Суть такая: в бутстрап вкладках встроина owl карусель из админки мы загружаем в нее картинки и по переключению вкладки меняется набор картинок. Так вот при переключении вкладки до момента полной загрузки всех 6 картинок они смещаются, что выглядит убого и коряво. Вопрос как реализовать preloader для групп, что бы они отображались только тогда когда все 6 изображений подгрузятся ?

      <div class="tab-pane fade show active" id="pills-cvet1" role="tabpanel" aria-labelledby="pills-cvet1-tab">
        <!-- Set up your HTML -->
        <div class="owl-carousel">
          <div><img src="./datas/exflds/img1" alt=""></div>
          <div><img src="./datas/exflds/img2" alt=""></div>
          <div><img src="./datas/exflds/img3" alt=""></div>
          <div><img src="./datas/exflds/img4" alt=""></div>
          <div><img src="./datas/exflds/img5" alt=""></div>
          <div><img src="./datas/exflds/img6" alt=""></div>
         </div>
       </div>
      <!-- Slider 2 -->
      <div class="tab-pane fade" id="pills-cvet2" role="tabpanel" aria-labelledby="pills-cvet2-tab">
        <div class="owl-carousel">
          <div><img src="./datas/exflds/img7" alt=""></div>
          <div><img src="./datas/exflds/img8" alt=""></div>
          <div><img src="./datas/exflds/img9" alt=""></div>
          <div><img src="./datas/exflds/img10" alt=""></div>
          <div><img src="./datas/exflds/img11" alt=""></div>
          <div><img src="./datas/exflds/img12" alt=""></div>
        </div>
      </div>``` и т д Вот куда и как вставить preloader ... с уважением