css - 有人可以解释我的 WordPress 主题网站上发生的问题吗？
问题描述
当调用域名frameless.ca时，网站加载一毫秒，然后页面变为空白，再过一两秒，整个网站再次加载。
我需要找出导致这种延迟的原因。由于它是一个基于主题的网站，因此代码很难通过。我想知道这里是否有人足够专家来找出问题并将其隔离？
任何建议表示赞赏！
解决方案
您的主题或某些插件正在生成以下负责此页面加载>空白页面>页面加载周期的CSS代码：
<style type="text/css"title="dynamic-css"class="options-output">
body {
opacity: 1;
visibility: visible;
-webkit-transition: opacity 0.24s ease-in-out;
-moz-transition: opacity 0.24s ease-in-out;
transition: opacity 0.24s ease-in-out;
}
.wf-loading body {
opacity: 0;
}
.ie.wf-loading body {
visibility: hidden;
}
.heading .title {
opacity: 1;
visibility: visible;
-webkit-transition: opacity 0.24s ease-in-out;
-moz-transition: opacity 0.24s ease-in-out;
transition: opacity 0.24s ease-in-out;
}
.wf-loading .heading .title {
opacity: 0;
}
.ie.wf-loading .heading .title {
visibility: hidden;
}
.heading .subtitle {
opacity: 1;
visibility: visible;
-webkit-transition: opacity 0.24s ease-in-out;
-moz-transition: opacity 0.24s ease-in-out;
transition: opacity 0.24s ease-in-out;
}
.wf-loading .heading .subtitle {
opacity: 0;
}
.ie.wf-loading .heading .subtitle {
visibility: hidden;
}
.navigation-top .menu a,
.navbar-default .navigation-top .menu>li>a {
opacity: 1;
visibility: visible;
-webkit-transition: opacity 0.24s ease-in-out;
-moz-transition: opacity 0.24s ease-in-out;
transition: opacity 0.24s ease-in-out;
}
.wf-loading .navigation-top .menu a,
.wf-loading .navbar-default .navigation-top .menu>li>a {
opacity: 0;
}
.ie.wf-loading .navigation-top .menu a,
.ie.wf-loading .navbar-default .navigation-top .menu>li>a {
visibility: hidden;
}
.btn-primary,
.btn-inverse:hover,
#mc-embedded-subscribe-form input[type="submit"],
.ctct-embed-signup .ctct-button,
.contact input[type="submit"] {
background-color: #2b6560;
}
.btn-primary,
.btn-inverse,
#mc-embedded-subscribe-form input[type="submit"],
.ctct-embed-signup .ctct-button {
border-color: #2b6560;
}
.btn-inverse {
color: #2b6560;
}
.navigation-top .menu>li.active a,
.navigation-top .menu>li>a:hover {
border-color: #31ddb7;
}
a,
a:hover,
a:focus,
.testimonials blockquote p:before,
.pagemeta a:link,
.pagemeta a:visited {
color: #31ddb7;
}
.dropdown-menu>.active>a,
.dropdown-menu>.active>a:focus,
.dropdown-menu>.active>a:hover,
.heading .title span,
.main-navigation li li:hover,
.main-navigation li li.focus {
background-color: #31ddb7;
}
.navbar-default {
background-color: #2b6560;
}
.navbar .navigation-top {
padding-top: 0;
}
.navbar-transparent .site-title a {
opacity: 1;
visibility: visible;
-webkit-transition: opacity 0.24s ease-in-out;
-moz-transition: opacity 0.24s ease-in-out;
transition: opacity 0.24s ease-in-out;
}
.wf-loading .navbar-transparent .site-title a {
opacity: 0;
}
.ie.wf-loading .navbar-transparent .site-title a {
visibility: hidden;
}
.navbar-default .site-title a {
opacity: 1;
visibility: visible;
-webkit-transition: opacity 0.24s ease-in-out;
-moz-transition: opacity 0.24s ease-in-out;
transition: opacity 0.24s ease-in-out;
}
.wf-loading .navbar-default .site-title a {
opacity: 0;
}
.ie.wf-loading .navbar-default .site-title a {
visibility: hidden;
}
.hero h1 {
font-family: Montserrat;
text-transform: none;
letter-spacing: 1.25px;
font-weight: 400;
color: #fff;
font-size: 49px;
opacity: 1;
visibility: visible;
-webkit-transition: opacity 0.24s ease-in-out;
-moz-transition: opacity 0.24s ease-in-out;
transition: opacity 0.24s ease-in-out;
}
.wf-loading .hero h1 {
opacity: 0;
}
.ie.wf-loading .hero h1 {
visibility: hidden;
}
.hero h2 {
font-family: Bayon;
text-transform: none;
letter-spacing: 1.25px;
font-weight: 400;
color: #dbdbdb;
font-size: 35px;
opacity: 1;
visibility: visible;
-webkit-transition: opacity 0.24s ease-in-out;
-moz-transition: opacity 0.24s ease-in-out;
transition: opacity 0.24s ease-in-out;
}
.wf-loading .hero h2 {
opacity: 0;
}
.ie.wf-loading .hero h2 {
visibility: hidden;
}
.hero {
background-size: cover;
background-image: url('https://frameless.ca/wp-content/uploads/2018/02/Twilight-1-1.jpg');
}
#welcome {
padding-top: 250px;
padding-bottom: 200px;
}
.features .feature i {
color: #19232d;
font-size: 50px;
opacity: 1;
visibility: visible;
-webkit-transition: opacity 0.24s ease-in-out;
-moz-transition: opacity 0.24s ease-in-out;
transition: opacity 0.24s ease-in-out;
}
.wf-loading .features .feature i {
opacity: 0;
}
.ie.wf-loading .features .feature i {
visibility: hidden;
}
.features .feature h3 {
text-align: center;
letter-spacing: 1.25px;
color: #19232d;
font-size: 30px;
opacity: 1;
visibility: visible;
-webkit-transition: opacity 0.24s ease-in-out;
-moz-transition: opacity 0.24s ease-in-out;
transition: opacity 0.24s ease-in-out;
}
.wf-loading .features .feature h3 {
opacity: 0;
}
.ie.wf-loading .features .feature h3 {
visibility: hidden;
}
.features {
background-color: #a8ffef;
}
.features {
padding-top: 100px;
padding-bottom: 130px;
}
.work {
background-color: #2b6560;
}
#work {
padding-top: 20px;
padding-bottom: 0;
}
.gallery {
background-color: #ffffff;
}
.gallery {
padding-top: 66px;
padding-bottom: 0;
}
.project-single {
background-color: #ffffff;
}
.project-single {
padding-top: 66px;
padding-bottom: 0;
}
.projects-grid {
background-color: #ffffff;
}
.projects-grid {
padding-top: 66px;
padding-bottom: 0;
}
.clients {
background-color: #ffffff;
}
.clients {
padding-top: 66px;
padding-bottom: 66px;
}
.stats .fa,
.stats p {
color: #ffffff;
opacity: 1;
visibility: visible;
-webkit-transition: opacity 0.24s ease-in-out;
-moz-transition: opacity 0.24s ease-in-out;
transition: opacity 0.24s ease-in-out;
}
.wf-loading .stats .fa,
.wf-loading .stats p {
opacity: 0;
}
.ie.wf-loading .stats .fa,
.ie.wf-loading .stats p {
visibility: hidden;
}
.stats {
background-size: cover;
background-image: url('https://frameless.ca/wp-content/themes/parallel-pro/images/bg-demo2.jpg');
}
.stats {
padding-top: 66px;
padding-bottom: 66px;
}
.testimonials {
background-color: #19232d;
}
#testimonials {
padding-top: 100px;
padding-bottom: 100px;
}
.services .service i {
color: #2b6560;
font-size: 50px;
opacity: 1;
visibility: visible;
-webkit-transition: opacity 0.24s ease-in-out;
-moz-transition: opacity 0.24s ease-in-out;
transition: opacity 0.24s ease-in-out;
}
.wf-loading .services .service i {
opacity: 0;
}
.ie.wf-loading .services .service i {
visibility: hidden;
}
.services .service h3 {
line-height: 36px;
letter-spacing: 1.25px;
font-weight: 400;
font-style: normal;
color: #19232d;
font-size: 30px;
opacity: 1;
visibility: visible;
-webkit-transition: opacity 0.24s ease-in-out;
-moz-transition: opacity 0.24s ease-in-out;
transition: opacity 0.24s ease-in-out;
}
.wf-loading .services .service h3 {
opacity: 0;
}
.ie.wf-loading .services .service h3 {
visibility: hidden;
}
.services {
background-color: #ffffff;
}
#services {
padding-top: 66px;
padding-bottom: 66px;
}
.pts {
background-color: #f6f9fc;
}
.pts {
padding-top: 66px;
padding-bottom: 66px;
}
.brands {
background-color: #ffffff;
}
#brands {
padding-top: 66px;
padding-bottom: 66px;
}
.calltoaction {
background-size: cover;
background-image: url('https://frameless.ca/wp-content/uploads/2018/01/widetm.jpg');
}
.calltoaction {
padding-top: 150px;
padding-bottom: 110px;
}
.calltoaction2 {
background-color: #2b6560;
}
#calltoaction2 {
padding-top: 50px;
padding-bottom: 50px;
}
.about {
background-color: #ff3333;
}
#about {
padding-top: 66px;
padding-bottom: 0;
}
.video {
background-size: cover;
background-position: center center;
background-image: url('https://frameless.ca/wp-content/themes/parallel-pro/images/bg-demo4.jpg');
}
#team {
padding-top: 100px;
padding-bottom: 100px;
}
.team {
background-color: #ffffff;
}
#team {
padding-top: 66px;
padding-bottom: 0;
}
.team {
background-color: #ffffff;
}
#blog {
padding-top: 66px;
padding-bottom: 66px;
}
.newsletter {
background-size: cover;
background-image: url('https://frameless.ca/wp-content/themes/parallel/images/bg-demo.jpg');
}
#newsletter {
padding-top: 66px;
padding-bottom: 66px;
}
.contact {
background-color: #19232d;
}
#contact {
padding-top: 66px;
padding-bottom: 66px;
}
.copyright {
background-color: #121a21;
}
#copyright {
padding-top: 30px;
padding-bottom: 30px;
}
</style>
如果你仔细看上面的代码，你会发现几乎所有的页面部分和选择器都以带有or值的.wf-loadingclass为前缀。opacity: 0;visibility: hidden;
推荐阅读
- c++ - 有没有办法在 occi 中预取 LOB 数据？
- loopbackjs - Loopback 4：创建播种器以在 mySQL 表中添加虚拟数据
- sql - 使用来自选择查询的数据更新表，包括第二个表
- javascript - 在 AppModule 中导入不必要的模块会减慢 Angular 2 应用程序的速度吗？
- sql - ORA-00907: 查询 ALTER TABLE Table_Name MODIFY Column_Name 缺少右括号
- php - 如何在php中删除`@`之前的发件人姓名
- amazon-web-services - AWS VPC - k8s - 负载均衡
- docker-compose - Traefik 重定向前端服务不起作用
- java - 如何在spring-boot数据休息的POST json中传递@EmbeddedId
- google-apps-script - Apps 脚本错误 - 找不到方法 getRange(number,number,(class),number)