Bootstrap 5.3: Image Carousel Firefox white space on first run - html

Question

I currently want to implement an image carousel from bootstrap on a page. The only problem is, that i have on the first run, when i load the page, the bug that the images load too slowly or it's a general bug, that the next picture is for a half second white. But only on the first run.
Steps to reproduce:
Firefox 109.0 (64-Bit)
Boostrap CSS + JS import [https://getbootstrap.com/docs/5.3/getting-started/download/]
css/bootstrap.css;
bootstrap.bundle.js
EDIT:
Got it fixed to have no more white spaces, but not the nice way.
I made the size of the pictures smaller and now it loads fast enough.
So on my question now is, if it's possible to only slide to the next picture if it's already fulled loaded/rendered.
At around 3s you can zoom in and get deeper into it. https://share.firefox.dev/3wujvGC
Code of the carousel:
<div class="containerCarousel">
<div class="textCentering position-absolute">
<div class="textoverlay">
<h1 class="text-light textVonOverlay mx-3 mx-md-5 mt-5 display-5">Lorem Ipsum</h1>
<h3 class="text-light textVonOverlay mx-3 mx-md-5 mt-1 opacity-75">Lorem Ipsum</h3>
<h5 class="text-light textVonOverlay mx-3 mx-md-5 mt-1">Lorem Ipsum</h4>
<button type="button" class="btn btn-secondary btn-lg mx-3 mx-md-5 mt-5 mb-5" >Lorem Ipsum</button>
</div>
</div>
<div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel" data-bs-pause="false">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="/images/background1_barenstein.jpg" class="d-block w-100 heightCarousel " alt="...">
</div>
<div class="carousel-item ">
<img src="/images/background2_barenstein.jpg" class="d-block w-100 heightCarousel " alt="...">
</div>
<div class="carousel-item ">
<img src="/images/background3_barenstein.jpg" class="d-block w-100 heightCarousel " alt="...">
</div>
<div class="carousel-item ">
<img src="/images/background4_barenstein.jpg" class="d-block w-100 heightCarousel" alt="...">
</div>
<div class="carousel-item ">
<img src="/images/background5_barenstein.jpg" class="d-block w-100 heightCarousel" alt="...">
</div>
</div>
</div>
</div>
.heightCarousel{
height: 100vh;
object-fit: cover;
}
.textCentering{
display: flex;
align-items: center;
justify-content: center;
height: 100%;
width: 100%;
z-index: 1023;
}
.textoverlay{
width: 80vw;
background-color: rgb(46, 46, 46, 0.7);
}
.textVonOverlay{
opacity: 1 !important;
}
.containerCarousel{
position: relative;
}
I searched through the internet and tried some stuff, but nothing worked.
Read through some bugzilla and some stackoverflow questions, but i didn't find an answer which worked for me.
Edit:
Short video of an mozilla analysis of the problem with some data to identify problems
https://drive.google.com/file/d/1IpeyQBr6pdWN1gD__DPq_aKRprNNoAbw/view?usp=sharing