以角度 8 加载页面时 Css 分散
[英]Css gets scattered while loading a page in angular 8
问题描述
I am building an angular project where I am using pre designed html templates .I am using lazy loading while loading my pages ,I don't exactly know how to describe the issue all I can say that when I load the page ,the css gets scattered as shown in the gif I am attaching.
我正在构建一个角度项目，我在其中使用预先设计的 html 模板。我在加载页面时使用延迟加载，我不完全知道如何描述这个问题，我只能说当我加载页面时，css 得到分散，如我附上的 gif 所示。
I have created common navbar and footer components and all the css links are there .Following is the code of my homepagecomponent.html我创建了常见的导航栏和页脚组件，所有的 css 链接都在那里。以下是我的 homepagecomponent.html 的代码
<app-basehome></app-basehome>
<app-navbarhome></app-navbarhome>
<body>
// Rest Html
</body>
<app-footerhome></app-footerhome>
Can anyone tell me why is this issue and how to solve it ??谁能告诉我为什么会出现这个问题以及如何解决它？ .I am guessing it might be because of lazy loading . .我猜这可能是因为延迟加载。
My app.routing module我的 app.routing 模块
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [
{
path:'',
loadChildren:'./website/website.module#WebsiteModule'
},
{
path: 'admin',
loadChildren: './admin/admin.module#AdminModule'
}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
I am just putting css files in the src/assets folder and providing the links like我只是将 css 文件放在 src/assets 文件夹中并提供如下链接
<!-- Owl Carousel ->
<link href="/assets/home/common/owl-carousel/css/owl.carousel.min.css" rel="stylesheet" type="text/css">
<!-- Fancybox -->
<link rel="stylesheet" href="/assets/home/common/fancybox/jquery.fancybox.min.css" type="text/css" />
<!-- Theme Style -->
<link href="/assets/home/css/style.css" rel="stylesheet" type="text/css">
4 个解决方案
解决方案1
4 已采纳 2020-01-04 09:51:06
解决方案2
1 2020-01-04 10:13:32
Unfortunately, It is normal behavior of Angular applications, the css is applied after the application has been fully loaded.不幸的是，这是 Angular 应用程序的正常行为，在应用程序完全加载后应用 css。
The only workaround you can adopt is to create a .css file where you insert all the styles that must be applied with high priority and include it in the index.html in the head, in doing so you will have a significant improvement but I don't know if you will solve altogether.您可以采用的唯一解决方法是创建一个.css文件，在其中插入所有必须以高优先级应用的样式并将其包含在头部的index.html中，这样做您将有显着的改进，但我没有不知道你会不会完全解决。
Also, even if unsightly, you can include your style in the head without importing a link, but directly on the page between the <style> tags, improving performance by another 15% - 20%.此外，即使不美观，您也可以在不导入链接的情况下将您的样式包含在头部，而是直接在<style>标签之间的页面上，将性能再提高 15% - 20%。
If anyone knows a better method, I would be very happy that you suggested it.如果有人知道更好的方法，我会很高兴你提出建议。
解决方案3
0 2022-06-30 22:52:04
I found a good solution which I tested from this site.我找到了一个很好的解决方案，我从这个站点测试过。
Alex Jover Preload Alex Jover 预载
https://www.digitalocean.com/community/tutorials/html-preload-prefetch https://www.digitalocean.com/community/tutorials/html-preload-prefetch
Use the following in the head tag in the index.html在 index.html 的 head 标签中使用以下内容
<link
rel="preload"
as="style"
onload="this.rel = 'stylesheet'"
href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css'>
In my tests this caused the page to lock, showing nothing (not even my spinner) until the css was loaded in the browser.在我的测试中，这导致页面被锁定，在浏览器中加载 css 之前什么都不显示（甚至我的微调器也不显示）。
解决方案4
-1 2020-01-02 08:33:35
transform link css to angular.json file将链接 css 转换为 angular.json 文件
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.