Javascript 如何制作一个全黑的空加载屏幕？这一直有效

我一直在寻找一个完美的，但我在谷歌上发现他们中的大多数人都有一个问题，就是不能全屏显示加载屏幕，有时他们可以，但大多数时候，通常在边缘，他们会显示网页的一部分，在加载屏幕后面加载内容，这很烦人。我怎么能这样做呢？全屏加载屏幕始终是全屏的，然后显示完成的页面。我大部分时间在网上找到的例子

@字体{
字体系列：雷威；
src:url（/0/multimedia/font/ralway.ttf）；
}
div#加载屏幕{
背景：黑色；
不透明度：1；
位置：固定；
z指数：10；
顶部：0px；
宽度：100%；
高度：1600px；
}
div#加载屏幕>div#加载{
颜色：白色；
宽度：120px；
高度：24px；
利润率：300px自动；
字体系列：雷威；
}
@仅媒体屏幕
和（最小宽度：320px）
和（最大宽度：736px）{
div#加载屏幕{
不透明度：1；
位置：固定；
z指数：10；
顶部：0px；
宽度：100%；
高度：1600px；
}
div#加载屏幕>div#加载{
颜色：白色；
宽度：185px；
高度：24px；
保证金：125px自动；
字体大小：240%；
字体系列：雷威；
}
}
addEventListener（“加载”，函数（）{
var load_screen=document.getElementById（“load_screen”）；
document.body.removeChild（加载屏幕）；
});
加载

尝试以下属性：

div#load_screen{
    background: black;
    opacity: 1;
    position: fixed;
    z-index:10;
    top: 0px;
    bottom:0;
    right:0;
    left:0;
    margin:auto;
}

---

然后改变模板的CSS，你就会得到你想要的。下面是我的例子，我大部分时间都在网上找到。