使用setTimeout

Question

我有一个由4张幻灯片组成的全屏幻灯片，但是我不想同时加载所有图像，因此我想到了在JavaScript中添加setTimeout的方法，

$(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延迟幻灯片放映中的图像加载吗？

这是我的方法。

通过添加图像src作为属性来调整HTML，例如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 {}。

下面是一个实际的例子。