【发布时间】：2021-03-19 01:57:52
【问题描述】：
我试图在我的页面加载时显示加载动画，但我的动画在加载完成之前就消失了。该页面仅包含来自 source.unsplash.com 的 10 张随机图片。想法是将它们用作背景图像，每 3 秒更改一次显示的图像。
在加载页面的第一秒，会快速显示几张不同的图像，然后页面进入预期的行为，即每 3 秒更改一次背景。作为一种解决方案，我创建了一个遍历图像节点列表的函数，确保每个图像都已使用 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>【问题讨论】：
-
您可以创建一个变量来检查已加载的图像数量。一旦变量达到您需要的图像数量，就开始显示它们。
标签： javascript html css image loading