javascript - 加载所有背景图像时显示页面

Question

我希望页面和其中的内容仅在我的大背景图像加载后显示。我已经尝试了很多方法来做到这一点，我就是找不到方法。 已经尝试 $(document).ready - 不工作。

body
{
	padding: 0;
	margin: 0;
	background-color: #ffffff;
	width: 100%;
	overflow-x: hidden;
	background: url('images/dark.jpg');
	background-attachment: fixed;
	background-size: cover;
}

Answer 1

您可以显示带有加载动画的叠加层

<div id="preloader"></div>

#preloader 
{ 
    position: fixed; 
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 9999;
    background: #FFFFFF url('URL TO AN ANIMATED LOADING GIF') no-repeat center center; 
}

所有内容加载完毕后设置为display: none

window.onload = function() {
    document.querySelector('#preloader').style.display = "none";
};