你所经历的叫做
FOUC
. 处理它的典型方法是
rel="stylesheet"
,这使您的页面将其加载为
渲染块
(DOM构建和javascript执行延迟,直到加载所有渲染块资源并构建CSSOM)。
的确,Google Pagespeed建议人们异步加载样式,因为这意味着页面呈现速度更快,javascript执行启动速度更快。
如果你想满足
两种情况
,正确的方法是提供可选的最小CSS布局(大小、位置和纯色背景色)规则内联(在
<style>
在您的
<head>
),
在异步加载的CSS中,需要添加规则来隐藏图解视图元素并显示普通元素。
如果操作得当,图解视图和实际内容之间的更改看起来很自然,就像
聚焦于
效应
调整图解视图元素的大小时,请记住,它们需要在所有屏幕宽度上进行测试。
如果您决定使用此技术,最好在网站达到最终形式后使用,包括所有内容(否
乱数假文
,没有虚拟图像)。如果事先这样做,那么每次决定更改内容或布局时都可能需要对其进行调整,因为图解视图与实际内容不匹配。
下面是一个简单的示例,我在其中模拟了加载过程。我没有从稍后加载的样式表中应用样式,而是在确定的时间后应用了一些类(
1s
),因此您可以看到用内容替换原理图的效果。
请注意下面的代码
概念验证
仅用于演示效果,而不是用作复制/粘贴解决方案。对于此任务,您需要根据网站的外观和行为,专门为网站内容设置图例元素的样式。
setTimeout(function() {
let loaders = document.querySelectorAll('.loading');
loaders.forEach(function(item) {
item.classList.add('loaded');
});
}, 1000)
* {
box-sizing: border-box;
}
.loading {
display: block;
position: relative;
}
.content,
.dummy-content {
transition: opacity .3s ease-in-out;
}
.content {
opacity: 0;
}
.loaded .content {
opacity: 1;
}
.dummy-content {
position: absolute;
width: 100%;
top: -20px;
left: 0;
opacity: 1;
pointer-events: none;
}
.loaded .dummy-content {
opacity: 0;
}
.dummy-content>* {
background-color: #eee;
content: '';
}
.dummy-content h2 {
height: 27px;
}
.dummy-content p {
height: 114px;
background: repeating-linear-gradient(180deg, #fff, #fff 6px, #eee 6px, #eee 18px)
}
<div class="loading">
<div class="dummy-content">
<h2></h2>
<p></p>
<p></p>
</div>
<div class="content">
<h2>Home</h2>
<p>Lorem ipsum dolor amet sartorial tilde typewriter chillwave, hell of tousled vegan lyft narwhal ramps craft beer cornhole unicorn. Crucifix pinterest tilde, bespoke jianbing iceland letterpress hoodie kinfolk you probably haven't heard of them cold-pressed. Disrupt occupy fanny pack lyft, lo-fi mustache butcher seitan deep v PBR&B jean shorts offal XOXO. Intelligentsia art party helvetica actually.</p>
<p>Succulents kale chips crucifix 3 wolf moon. Blog umami green juice VHS, swag everyday carry post-ironic portland scenester heirloom chillwave art party meh pour-over cold-pressed. Forage chia kale chips lo-fi asymmetrical bicycle rights kombucha vape williamsburg tilde waistcoat pug franzen. Air plant shabby chic blue bottle viral, +1 microdosing next level palo santo vape hexagon ethical bespoke sartorial heirloom. Iceland glossier drinking vinegar seitan chillwave letterpress schlitz you probably haven't heard of them mlkshk adaptogen. 90's tattooed whatever, typewriter swag fam green juice brooklyn pug YOLO messenger bag. Mixtape roof party organic intelligentsia dreamcatcher health goth succulents drinking vinegar schlitz woke artisan hexagon everyday carry asymmetrical keytar.</p>
</div>
</div>
