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

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

在加载页面的第一秒内，几个不同的图像被快速显示，然后页面进入预期的行为，即每3秒有一个变化的背景。作为一个解决方案，我制作了一个函数，它遍历图像的NodeList，确保每个图像都使用onload加载。之后，我删除加载动画。然而，动画并不能阻止快速显示几个不同图像的前一秒，这就是加载动画的全部意义。

有没有一种方法可以隐藏我的内容，直到所有内容都正确加载？我尝试将第一个图像(id＝0(的z索引设置为1，同时将所有其他图像的z索引都设置为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>

我不确定您的onload函数是做什么的。它删除了load类，但没有应用于该类的样式，因此您不做任何更改
在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>

相关内容

最新更新

热门标签：