如何在 angular 4 应用程序中应用此预加载屏幕?

我一直在尝试在角度 4 中应用这个预加载屏幕。这是我索引的代码.html

这是指向此 css 效果的代码笔的链接。

我不想要任何其他预加载屏幕.请具体说明为什么即使在虚拟项目中也不起作用。我已经尝试了其他一些css屏幕，但它们也无法正常工作。我怀疑问题出在关键帧上，它们只使用 css 的转换属性。

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test4preloadingscreen</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root>
<style>
@import url('https://fonts.googleapis.com/css?family=Roboto:700');
*, *:after, *:before {
margin: 0;
padding: 0;
box-sizing: inherit;
}
app-root {
margin: 0;
padding: 0;
height: 100vh;
background: #262626;
display: flex;
justify-content: center;
box-sizing: border-box;
align-items: center;
}
ul {
display: flex;
}
li {
list-style: none;
color: #484848;
font-family: roboto, Arial, Sans-serif;
font-size: 5em;
letter-spacing: 15px;
animation: loading 1.4s linear infinite;
}
@keyframes loading {
0% {
color: #484848;
text-shadow: none;
}
90% {
color: #484848;
text-shadow: none;
}
100% {
color: #fff900;
text-shadow: 0 0 7px #fff900, 0 0 50px #ff6c00;
}
}
li:nth-child(1) {
animation-delay: .2s;
}
li:nth-child(2) {
animation-delay: .4s;
}
li:nth-child(3) {
animation-delay: .6s;
}
li:nth-child(4) {
animation-delay: .8s;
}
li:nth-child(5) {
animation-delay: 1s;
}
li:nth-child(6) {
animation-delay: 1.2s;
}
li:nth-child(7) {
animation-delay: 1.4s;
}
</style>
<ul>
<li>L</li>
<li>O</li>
<li>A</li>
<li>D</li>
<li>I</li>
<li>N</li>
<li>G</li>
</ul>
</app-root>
</body>
</html>

我已经尝试过您的代码，它运行良好。请重新检查代码。CSS 中可能会有一些中断。如果 CSS 中存在任何中断，那么在中断之后其他 CSS 将不起作用。希望对您有所帮助。

@import url('https://fonts.googleapis.com/css?family=Roboto:700');
*, *:after, *:before {
margin: 0;
padding: 0;
box-sizing: inherit;
}
app-root {
margin: 0;
padding: 0;
height: 100vh;
background: #262626;
display: flex;
justify-content: center;
box-sizing: border-box;
align-items: center;
}
ul {
display: flex;
}
li {
list-style: none;
color: #484848;
font-family: roboto, Arial, Sans-serif;
font-size: 5em;
letter-spacing: 15px;
animation: loading 1.4s linear infinite;
}
@keyframes loading {
0% {
color: #484848;
text-shadow: none;
}
90% {
color: #484848;
text-shadow: none;
}
100% {
color: #fff900;
text-shadow: 0 0 7px #fff900, 0 0 50px #ff6c00;
}
}
li:nth-child(1) {
animation-delay: .2s;
}
li:nth-child(2) {
animation-delay: .4s;
}
li:nth-child(3) {
animation-delay: .6s;
}
li:nth-child(4) {
animation-delay: .8s;
}
li:nth-child(5) {
animation-delay: 1s;
}
li:nth-child(6) {
animation-delay: 1.2s;
}
li:nth-child(7) {
animation-delay: 1.4s;
}

<ul>
<li>L</li>
<li>O</li>
<li>A</li>
<li>D</li>
<li>I</li>
<li>N</li>
<li>G</li>
</ul>

此组件控制显示/隐藏初始屏幕，步骤将如下所示：

1-浏览器将在您的服务器中下载index.html文件，然后从索引指示的文件中搜索.html例如："运行时.js，polyfills.js，main.js，vendor.js"，持续时间为300毫秒(在我的情况下);

2-下载文件后，页面将显示启动画面;

3-毕竟"角度解析器"将向您的服务器发出请求以获取您的数据组件;

4-下载所有图像，媒体，字体后

5-之后，当所有下载和加载时，启动画面将被隐藏

@Component({
selector: 'sei',
templateUrl: './sei.component.html',
styleUrls: ['./sei.component.css']
})   
export class AppComponent implements OnInit {
public showSplash: boolean = true; //Show or hide splash screen
window.onload = (event) => {
this.showSplash = false; //Trigger when everything load
}
}

但是我们在这里有一个问题，因为"初始屏幕"仅在下载角度文件时才可见(索引.html，"运行时.js，polyfills.js，main.js，vendor.js")，我们需要等待所有这些角度文件在应用程序加载所有组件，图像，解析器等期间显示启动画面。

我们希望在浏览器获得第一个索引.html文件时启动"启动画面"，此时我们希望开始显示初始屏幕并掌握其他角度文件。

转到您的索引.html在"应用程序"标签下方，您可以创建"启动画面"，这将在您的浏览器获得 Angular 主索引.html文件时显示。

...
<body>
<app></app> //YOUR APP
<div id="splashScreen">
splash screen, loading angular, wait... 
</div>
</body>
<style>
.splashScreenFadeHide{
opacity: 0; //turn transparent
transition: opacity 1s linear; //after 1 second
}
</style>
...

为了在加载所有内容时隐藏初始屏幕，您将制作：

export class AppComponent implements OnInit {
ngOnInit(): void {
window.onload = (event) => { //triger when every thing is load (files, assets, components' resolver, etc)

// All good so add clas "splashScreenFade" to hide the splash screen slowly 
document.getElementById("splashScreen").classList.add("splashScreenFadeHide")
}
//we are listening the "splasn screen" turn transparent and after apply the "display = none"  
document.getElementById("splashScreen").addEventListener('transitionend', (e) => {
document.getElementById("splashScreen").style.display = 'none'
})
}
}

现在我们有一个启动画面，因为第一个文件是由浏览器加载的，并且仅在读取所有文件、图像、解析器等时才隐藏。

如果这对你有帮助，请给我一个赞。

相关内容

最新更新

热门标签：