使用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添加为属性（即data-bg-src="/slides/2.jpg"）来调整HTML：

<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 {}。

以下是此实例的示例。