加载动画在加载完成前消失

Question

我试图在我的页面加载时显示加载动画，但我的动画在加载完成之前就消失了。该页面仅包含来自 source.unsplash.com 的 10 张随机图像。这个想法是将它们用作背景图像，每 3 秒更改一次显示的图像。

在加载页面的第一秒，快速显示几张不同的图像，然后页面进入每 3 秒更改一次背景的预期行为。作为解决方案，我创建了一个函数来遍历图像的 NodeList，确保每个图像都已使用 onload 加载。在此之后，我然后删除加载动画。但是，动画不会阻止快速显示几个不同图像的第一秒，这就是加载动画的重点。

有没有办法在所有内容正确加载之前隐藏我的内容？我尝试将第一张图片 (id=0) 的 z-index 设置为 1，同时将所有其他图片的 z-index 设置为 0，以便最初仅显示第一张图片，但这仅在第一张图像在所有其他图像之前加载。情况并非总是如此。我可以将动画硬编码为持续几秒钟，但这根本不是一个好的解决方案。任何建议将不胜感激！

// function to rotate which li background image is being displayed
function changeIndex(obj, coffeeShops) {

    if (obj.num === 0) {
        coffeeShops[coffeeShops.length - 1].style.zIndex = 0;
    }
    else {
        coffeeShops[obj.num - 1].style.zIndex = 0;
    }
    coffeeShops[obj.num].style.zIndex = 1;

    obj.num++;
    if (obj.num === coffeeShops.length) {
        obj.num = 0;
    }
};

function changeBg(t) {
    const coffeeShops = document.querySelectorAll('img');
    let obj = {};
    obj.num = 0;

    let timerId = setTimeout(function change() {
        changeIndex(obj, coffeeShops);
        timerId = setTimeout(change, t * 1000);
    }, t * 1000);
};

function loadPage() {
    const images = document.querySelectorAll('.load');
    
    images.forEach(image => {
        image.onload = function () {
            image.classList.remove('load');
        };
    });

    const loader = document.querySelector('.loader-wrapper');
    loader.remove();
};



loadPage();
changeBg(3);

.loader-wrapper {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #242f3f;
    display:flex;
    justify-content: center;
    align-items: center;
}
.loader {
    display: inline-block;
    width: 30px;
    height: 30px;
    position: relative;
    border: 4px solid #Fff;
    animation: loader 2s infinite ease;
}
.loader-inner {
    vertical-align: top;
    display: inline-block;
    width: 100%;
    background-color: #fff;
    animation: loader-inner 2s infinite ease-in;
}
@keyframes loader {
    0% { transform: rotate(0deg);}
    25% { transform: rotate(180deg);}
    50% { transform: rotate(180deg);}
    75% { transform: rotate(360deg);}
    100% { transform: rotate(360deg);}
}
@keyframes loader-inner {
    0% { height: 0%;}
    25% { height: 0%;}
    50% { height: 100%;}
    75% { height: 100%;}
    100% { height: 0%;}
}

img {
    width: 100%;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 0;
    left: 0;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Home</title>
    <link rel="preload" href="https://source.unsplash.com/collection/62334021/1920x1080" as="image">
    <link rel="stylesheet" href="home.css">
</head>

<body>

    <div class="pickgradient">
        <img class="load" src="https://source.unsplash.com/collection/62334021/1920x1080" id="0">
        <img class="load" src="https://source.unsplash.com/collection/8331835/1920x1080" id="1">
        <img class="load" src="https://source.unsplash.com/collection/584433/1920x1080" id="2">
        <img class="load" src="https://source.unsplash.com/collection/9787713/1920x1080" id="3">
        <img class="load" src="https://source.unsplash.com/collection/11288659/1920x1080" id="4">
        <img class="load" src="https://source.unsplash.com/collection/5045180/1920x1080" id="5">
        <img class="load" src="https://source.unsplash.com/collection/4794086/1920x1080" id="6">
        <img class="load" src="https://source.unsplash.com/collection/40914537/1920x1080" id="7">
        <img class="load" src="https://source.unsplash.com/collection/1625008/1920x1080" id="8">
        <img class="load" src="https://source.unsplash.com/collection/2248881/1920x1080" id="9">
    </div>

    <div class="loader-wrapper">
        <span class="loader"><span class="loader-inner"></span></span>
    </div>

    <script src="home.js">
    </script>
</body>

</html>

Answer 1

我不确定你的 onload 函数是做什么的。它删除了 load class，但是没有样式应用到这个 class，所以你什么都不改变。
为什么不使用 'display' 或 'opacity' 样式 insead z-index 所以不相关的图像根本不会显示，而不仅仅是被覆盖。
对于加载屏幕 - 可能你想显示 i 直到第一个图像加载，也可能你想启动滑块超时。

结果：

// function to rotate which li background image is being displayed
function changeIndex(obj, coffeeShops) {

    coffeeShops.forEach((img,i) => img.style.display = obj.num === i ? 'block':'none');
    obj.num++;
    if (obj.num === coffeeShops.length) {
        obj.num = 0;
    }
};

function changeBg(t) {
    const coffeeShops = document.querySelectorAll('img');
    let obj = {};
    obj.num = 0;

    let timerId = setTimeout(function change() {
        changeIndex(obj, coffeeShops);
        timerId = setTimeout(change, t * 1000);
    }, t * 1000);
};

function loadPage() {
    const images = document.querySelectorAll('.load');
    
    images[0].onload = () => {
        const loader = document.querySelector('.loader-wrapper');
        loader.remove();
        changeBg(3);
    };
};



loadPage();

.loader-wrapper {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #242f3f;
    display:flex;
    justify-content: center;
    align-items: center;
}
.loader {
    display: inline-block;
    width: 30px;
    height: 30px;
    position: relative;
    border: 4px solid #Fff;
    animation: loader 2s infinite ease;
}
.loader-inner {
    vertical-align: top;
    display: inline-block;
    width: 100%;
    background-color: #fff;
    animation: loader-inner 2s infinite ease-in;
}
@keyframes loader {
    0% { transform: rotate(0deg);}
    25% { transform: rotate(180deg);}
    50% { transform: rotate(180deg);}
    75% { transform: rotate(360deg);}
    100% { transform: rotate(360deg);}
}
@keyframes loader-inner {
    0% { height: 0%;}
    25% { height: 0%;}
    50% { height: 100%;}
    75% { height: 100%;}
    100% { height: 0%;}
}

img {
    width: 100%;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 0;
    left: 0;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Home</title>
    <link rel="preload" href="https://source.unsplash.com/collection/62334021/1920x1080" as="image">
    <link rel="stylesheet" href="home.css">
</head>

<body>

    <div class="pickgradient">
        <img class="load" src="https://source.unsplash.com/collection/62334021/1920x1080" id="0">
        <img class="load" src="https://source.unsplash.com/collection/8331835/1920x1080" id="1">
        <img class="load" src="https://source.unsplash.com/collection/584433/1920x1080" id="2">
        <img class="load" src="https://source.unsplash.com/collection/9787713/1920x1080" id="3">
        <img class="load" src="https://source.unsplash.com/collection/11288659/1920x1080" id="4">
        <img class="load" src="https://source.unsplash.com/collection/5045180/1920x1080" id="5">
        <img class="load" src="https://source.unsplash.com/collection/4794086/1920x1080" id="6">
        <img class="load" src="https://source.unsplash.com/collection/40914537/1920x1080" id="7">
        <img class="load" src="https://source.unsplash.com/collection/1625008/1920x1080" id="8">
        <img class="load" src="https://source.unsplash.com/collection/2248881/1920x1080" id="9">
    </div>

    <div class="loader-wrapper">
        <span class="loader"><span class="loader-inner"></span></span>
    </div>

    <script src="home.js">
    </script>
</body>

</html>

加载动画在加载完成前消失

Loading animation disappears before loading is complete

html

javascript

css

image

loading