Задержка загрузки изображений в слайд-шоу с помощью setTimeout

Question

У меня есть полноэкранное слайд-шоу, состоящее из 4 слайдов, но я не хочу загружать все изображения одновременно, поэтому я подумал добавить setTimeout в javascript следующим образом:

$(document).ready(function(){
setTimeout(function(){
   $('.cb-slideshow li:nth-child(2) span').css("background-image: url(/slides/2.jpg)");
}, 5000); 

Слайд-шоу состоит из 6 элементов, каждый из которых анимирован с ключевыми кадрами.

Слайды:

    .cb-slideshow li:nth-child(1) span { 
    background-image: url(/slides/1.jpg) 
    }
.cb-slideshow li:nth-child(2) span { 
   background-image: url(/slides/2.jpg);
 animation-delay: 6s;
 }
.cb-slideshow li:nth-child(3) span {
    background-image: url(/slides/3.jpg);
    animation-delay: 12s;
}
.cb-slideshow li:nth-child(4) span {
    background-image: url(/slides/4.jpg);
    animation-delay: 18s;
}

Слайд-шоу:

<ul class="cb-slideshow">
            <li><span>Image 01</span></li>
            <li><span>Image 02</span></li>
            <li><span>Image 03</span></li>
            <li><span>Image 04</span></li>
        </ul>

Стиль:

.cb-slideshow,
.cb-slideshow:after {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: -2;
    list-style: none
}
.cb-slideshow li span {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    color: transparent;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: none;
    opacity: 0;
    z-index: -2;
    -webkit-backface-visibility: hidden;
    animation: imageAnimation 24s linear infinite 0s;
}
.cb-slideshow li div {
z-index: 1000;
position: absolute;
bottom: 90px;
left: 0px;
width: 100%;
text-align: right;
opacity: 0;
-webkit-animation: titleAnimation 24s linear infinite 0s;
-moz-animation: titleAnimation 24s linear infinite 0s;
-o-animation: titleAnimation 24s linear infinite 0s;
-ms-animation: titleAnimation 24s linear infinite 0s;
animation: titleAnimation 24s linear infinite 0s;
}
.cb-slideshow li div h3 {
    font-size: 160px;
    padding: 0 30px;
    line-height: 120px;
    color: rgba(169,3,41, 0.8);
}

.cb-slideshow li:nth-child(2) div {
    -webkit-animation-delay: 6s;
    -moz-animation-delay: 6s;
    -o-animation-delay: 6s;
    -ms-animation-delay: 6s;
    animation-delay: 6s;
}
.cb-slideshow li:nth-child(3) div {
    -webkit-animation-delay: 12s;
    -moz-animation-delay: 12s;
    -o-animation-delay: 12s;
    -ms-animation-delay: 12s;
    animation-delay: 12s;
}
.cb-slideshow li:nth-child(4) div {
    -webkit-animation-delay: 18s;
    -moz-animation-delay: 18s;
    -o-animation-delay: 18s;
    -ms-animation-delay: 18s;
    animation-delay: 18s;
}

Но это не работает.Могу ли я даже иметь li: nth-child (2) внутри скрипта?Есть идеи?

Answer 1

Задержка загрузки изображений в слайд-шоу с помощью setTimeout?

Это мой подход.

Настройте HTML, добавив в качестве атрибутов src своего изображеният.е. data-bg-src="/slides/2.jpg":

<ul class="cb-slideshow">
    <li> 
        <span style="background-image:url('https://picsum.photos/1200/800?image=0')">Image 01</span>
    </li>
    <li>
        <span data-bg-src="https://picsum.photos/1200/800?image=1">Image 02</span>
    </li>
    <li>
        <span data-bg-src="https://picsum.photos/1200/800?image=2">Image 03</span>
    </li>
    <li>
        <span data-bg-src="https://picsum.photos/1200/800?image=3">Image 04</span>
    </li>
</ul>

JavaScript:

(function() {
    const bgSrcs = document.querySelectorAll('[data-bg-src]');

    for (let i = 0, m = bgSrcs.length; i < m; i++) {
        setTimeout(() => {
            bgSrcs[i].style.backgroundImage = 'url(' + bgSrcs[i].dataset.bgSrc + ')';
            // Or in jQuery
            // $(bgSrcs[i]).css('background-image: url(' + bgSrcs[i].dataset.bgSrc + ')');
        }, i * 1000); // Stagger the load
    }
})();

JSFiddle (открыть консоль)

Полагаю, это попытка повысить производительность за счет отложенной загрузки изображений.Если это так, то есть гораздо лучшие способы сделать это.Среди множества доступных ресурсов, этот по CSS Tricks представляется наиболее полным и актуальным.

РЕДАКТИРОВАТЬ 1:

Ваш CSS тоже не работает.Вам нужно добавить следующее, если вы добавляете background-images к <span>:

.cb-slideshow li{
    width: 100%;
    height: 100%;
    position: absolute;
}

И удаляете opacity: 0; из .cb-slideshow li span {}.

Ниже приведеноПример этого в действии.