我想模糊我的网站的整个“正文”部分，直到页面完全呈现。我有一个preloader设置，它由两部分组成：“before”作为背景，“：after”作为前景。
我可以用html＆css实现这个目标，还是需要修改JavaScript？
*这是我想要达到的完美“永久”的例子。但我只希望它是临时的（直到页面加载）。
body {
-webkit-filter: blur(20px);
filter: blur(20px);
}
我目前的网站css：
body {
background-color: #fff;
}
.site-preloader:before {
background-color: transparent;
//I want to blur the body here somehow
}
.site-preloader:after {
background: url("/preloader-image.png") 0 0 no-repeat;
z-index: 9999;
}
虽然通过以下方式在技术上可以实现
给你的身体一个班级.i.e。 .loading应用filter:blur(200px);并添加一个javascript片段，在页面加载时删除该类
document.addEventListener('DOMContentLoaded',function(){
document.body.classlist.remove('loading');
})
建议不要这样做 - 主要是因为你的css，javascript和html会在不同的时间加载，因此你可能会根据加载资产所需的时间得到不同的结果。
当然除非你在settimeout函数中包装类的删除，但是再次出现这个问题的原因是你添加了不必要的'假'页面加载，使得页面看起来更慢
鉴于要求。我建议逐步渲染上面的折叠内容AKA，在头部区域使用CSS并且在折叠下方的主体中使用链接rel =“stylesheet”。浏览器支持这种技术（在重新折叠所有资产之前显示上面的折叠内容），但会触发html检查错误。
您还可以将折叠下方的CSS推迟到页面底部。如果你需要一些权力来支持你转向Google ... https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery ...
另请注意，我强烈建议使用不透明度，因为它使用GPU释放CPU以继续加载页面的其余部分。如果你模糊页面将需要一遍又一遍地重复布局过程，如果它是动画的，加载时间会更糟，但是Louay Madrid解决方案不会让它变得更糟。
至少为用户提供一个标题，其中包含公司名称和电话号码以及访问网站导航的原因，为什么这些可怜的灵魂正在等待页面的其余部分，因此他们认为没有连接死亡。
<head>
<style>
// above the fold css - desired in html
body {
background-color: #fff;
}
#main {
background: url( ... your image ... );
animation-name: beginPage;
animation-duration: 4s;
-webkit-animation: beginPage 5s; /* Safari 4+ */
-moz-animation: beginPage 5s; /* Fx 5+ */
-o-animation: beginPage 5s; /* Opera 12+ */
animation: beginPage 5s; /* IE 10+, Fx 29+ */
}
@-webkit-keyframes beginPage {
0% { opacity: 0; }
100% { opacity: 1; }
}
@-moz-keyframes beginPage {
0% { opacity: 0; }
100% { opacity: 1; }
}
@-o-keyframes NbeginPage {
0% { opacity: 0; }
100% { opacity: 1; }
}
@keyframes beginPage {
0% { opacity: 0; }
100% { opacity: 1; }
}
</style>
</head>
<body>
<div id="main">
Above the fold content
<link rel="stylesheet" href="below the fold.css">
Below the fold content
</div>
</body>