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

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

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

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

//旋转正在显示的li背景图像的函数
功能变化指数（obj、咖啡店）{
如果（obj.num==0）{
coffeeShops[coffeeShops.length-1].style.zIndex=0；
}
否则{
咖啡店[obj.num-1].style.zIndex=0；
}
咖啡店[obj.num].style.zIndex=1；
obj.num++；
if（obj.num==coffeeShops.length）{
obj.num=0；
}
};
功能更改bg（t）{
const coffeeShops=document.querySelectorAll（'img'）；
设obj={}；
obj.num=0；
let timerId=setTimeout（函数更改（）{
变更指数（obj、咖啡店）；
timerId=setTimeout（更改，t*1000）；
}，t*1000）；
};
函数loadPage（）{
const images=document.querySelectorAll（'.load'）；
images.forEach（image=>{
image.onload=函数（）{
image.classList.remove（'load'）；
};
});
const loader=document.querySelector（'.loader wrapper'）；
loader.remove（）；
};
loadPage（）；
改变bg（3）
.loader包装器{
宽度：100%；
身高：100%；
位置：绝对位置；
排名：0；
左：0；
背景色：#242f3f；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
.加载器{
显示：内联块；
宽度：30px；
高度：30px；
位置：相对位置；
边框：4px实心#Fff；
动画：无限轻松；
}
.装载机内部{
垂直对齐：顶部；
显示：内联块；
宽度：100%；
背景色：#fff；
动画：装载机内部2秒无限轻松；
}
@关键帧加载程序{
0%{变换：旋转（0度）；}
25%{变换：旋转（180度）；}
50%{变换：旋转（180度）；}
75%{变换：旋转（360度）；}
100%{变换：旋转（360度）；}
}
@关键帧加载器内部{
0%{高度：0%；}
25%{高度：0%；}
50%{高度：100%；}
75%{高度：100%；}
100%{高度：0%；}
}
img{
宽度：100%；
保证金：0；
填充：0；
位置：绝对位置；
排名：0；
左：0；
}

家

我不确定你的onload函数做什么。它删除了
load
类，但没有应用于该类的样式，因此您不做任何更改
而不使用“显示”或“不透明度”样式插入
z-index
，因此不相关的图像将不会显示，而不仅仅是覆盖
对于加载屏幕-可能您想显示i直到第一次图像加载，也可能您想启动滑块超时
结果:


//旋转正在显示的li背景图像的函数
功能变化指数（obj、咖啡店）{
coffeeShops.forEach（（img，i）=>img.style.display=obj.num==i？'block'：'none'）；
obj.num++；
if（obj.num==coffeeShops.length）{
obj.num=0；
}
};
功能更改bg（t）{
const coffeeShops=document.querySelectorAll（'img'）；
设obj={}；
obj.num=0；
let timerId=setTimeout（函数更改（）{
变更指数（obj、咖啡店）；
timerId=setTimeout（更改，t*1000）；
}，t*1000）；
};
函数loadPage（）{
const images=document.querySelectorAll（'.load'）；
图像[0]。onload=（）=>{
const loader=document.querySelector（'.loader wrapper'）；
loader.remove（）；
改变bg（3）；
};
};
loadPage（）
.loader包装器{
宽度：100%；
身高：100%；
位置：绝对位置；
排名：0；
左：0；
背景色：#242f3f；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
.加载器{
显示：内联块；
宽度：30px；
高度：30px；
位置：相对位置；
边框：4px实心#Fff；
动画：无限轻松；
}
.装载机内部{
垂直对齐：顶部；
显示：内联块；
宽度：100%；
背景色：#fff；
动画：装载机内部2秒无限轻松；
}
@关键帧加载程序{
0%{变换：旋转（0度）；}
25%{变换：旋转（180度）；}
50%{变换：旋转（180度）；}
75%{变换：旋转（360度）；}
100%{变换：旋转（360度）；}
}
@关键帧加载器内部{
0%{高度：0%；}
25%{高度：0%；}
50%{高度：100%；}
75%{高度：100%；}
100%{高度：0%；}
}
img{
宽度：100%；
保证金：0；
填充：0；
位置：绝对位置；
排名：0；
左：0；
}

家