Question

我正在开展一个项目，我的客户问我是否可以消除切换页面时显示的白色闪光。现在显然这似乎是不可能的，因为这只是两页之间的过渡。

通常我会使用AJAX来解决这个问题，但是，我正在使用现有的Wordpress代码库，我想使用最简单的解决方案，所以最好是让它看起来像加载屏幕例如首先加载背景颜色，然后在页面上的其他内容之前加载黑色。

这是否可能，如果是，是否有人知道该怎么做？

感谢。

Answer 1

您必须将您的网站构建为一页应用。

您使用主题创建布局页面，然后在ajax中加载页面内容。这样就不会有任何重装。

Answer 2

我通常使用此代码

window.onload = function () { 
    var spinner = document.getElementById("loaderWrapper");
    spinner.setAttribute('style', 'opacity:0;transition: 1.5s linear;');
    setTimeout(function(){
        spinner.style.display = "none";
    },500);
}

.content{
width: 500px;
height: 300px;
background: red;}
#loaderWrapper{
	position: fixed;
	top:0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: black;
	text-align: center;
	z-index: 100; 
	opacity: 1;
}
#loaderWrapper:after{
    content: "Loading...";
    margin-top: 15px;
    width: 100%;
	display: inline-block;
  color: white;
}
.loader {
	border: 3px solid #f3f3f3;
	border-radius: 50%;
	border-top: 3px solid #3498db;
	width: 45px;
	height: 45px;
	-webkit-animation: spin 2s linear infinite;
	animation: spin 2s linear infinite;
	margin-top: 30%;
    margin-top: 50vh;
    display: inline-block;
  }

<div id="loaderWrapper"><div class="loader"></div></div>
<div class="content">COntent here</div>

在页面之间使用背景颜色

2 个答案: