Bootstrap carousel showing images with delay at first fading loop

Question

I have the following problem. There is delay in displaying photos in fading mode. When the animation starts the photo is not shown right away, but with delay. When animation passes to the next slide (second, third), a few seconds before it displays the image i see the background. It look like it was loading it with delay. But even when image is preloaded, issue can still repeats when I reload the page.

After passing all the slides once, the animation is smooth until reload the page. The picture is high resolution (about 1800px) because it's supposed to be something like hero slider.

Please Help!

Answer 1

OK, looks like nobody is going to answer my question. So I will answer it myself because someone may have a similar problem and use it a bit. After many hours of messing with it, it turns out that replacing the method of inserting photos into img from background-image solves the problem. Thus, it can be assumed that the problem is in the very construction of the carousel. Don't use background-img to place images into divs. Use classic img with src. If you want to have pictures fitting into the div like a cover option in bg-img mode, then for img you can add an object-fit: cover entry in css. That resolves problem.