javascript - 使用 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

Delay loading of images in slideshow with setTimeout?

这就是我的方法。

通过添加图像源作为属性来调整 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 {} .

下面是一个实际的示例。