Question

我想模糊我网站的整个“正文”部分，直到页面完全呈现为止。我设置了一个预加载器，它由两部分组成：“：before”（作为背景）和“：after”（作为前景）。

我可以仅使用html＆css来实现此功能，还是需要修改JavaScript？

*这是我想要实现的完美的“永久”示例。但是我只希望它是临时的（直到页面加载）。

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;
}

我当前的网站CSS：

<?php 
///////// DATABASE CONECTION /////////

    // (host, user, password, database_name)
    $conection = mysqli_connect('localhost', 'root', '', 'database') or die('Connection failed');
    mysqli_set_charset($conection, 'utf8');

// your array
    // !!CAUTION: name columns in database only numeric maybe will give you problems later in SQL Sentences). KEY array name = column name
    $test= Array(
        "col0" => "1",
        "col2" => "22",
        "col4" => "1",
        "col5" => "0.25",
        "col6" => "0.25",
        "col8" => "1.25",
        "col9" => "0.25",
        "col11" => "1",
        "col29" => "0.25",
        "col30" => "0.25",
        "col32" => "0.25",
        "col33" => "0.25"
    );

    // array_keys() function returns an array containing the keys
    $columns = array_keys($test);
    // array_values() function returns an array containing all the values of an array
    $values = array_values($test);

// build your mysql sentetence:
    // $sql = "INSERT INTO tablename (col0, col1) VALUES ('value0', 'value1')"
    // The implode() function returns a string from the elements of an array
    $sql = "INSERT INTO table1 (" . implode(", ", $columns) . ") VALUES ('" . implode("', '", $values) . "')";

// execute mysql sentence in database
    mysqli_query($conection, $sql) or die('Insert table1:'.mysqli_error($conection));

?>

Answer 1

尽管在技术上可以通过执行以下操作来实现

给你的身体上课。 .loading应用filter:blur(200px);并添加一个javascript片段，以删除页面加载时的类

document.addEventListener('DOMContentLoaded',function(){
document.body.classlist.remove('loading');
})

不建议这样做-主要是因为css，javascript和html将在不同的时间加载，因此，根据加载资产所需的时间，您可能会获得不同的结果。

除非您当然将删除类的内容包装在settimeout函数中，但同样的问题是您正在添加不必要的“伪造”页面加载，从而使页面显得更慢

Answer 2

给出要求。我建议对折叠内容上方的AKA进行渐进式渲染，在头部使用CSS并在折叠下方的主体中使用链接rel =“ stylesheet”。浏览器支持此技术（在折叠以下所有资产之前显示折叠内容上方的内容），但会触发html checker错误。

您还可以将折叠下面的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>

如何在CSS中模糊正文直到页面完全加载

2 个答案: