创建一个骨架加载
大家好，今天我们要来了解一种比较特别的内容加载方式，实际上，我们要讨论的是骨架加载（skeleto loading），这是一种相当普遍且独特的页面加载方式，它可以让用户在页面加载过程中稍作等待。准备好了吗？让我们开始吧！
那是什么？
那么，使用骨架加载的页面是什么样子的呢？事实上，你会在各个平台上看到它们：Twitter、YouTube、Netflix……下面你可以看到上面提到的几个网站上的骨架加载示例。
正如你所看到的，知名网站使用骨架式加载是有原因的：它可以让用户直接了解加载后信息将在哪里以及如何组织。
让我们开始编程吧
现在我们将开始创建一个使用骨架加载技术来展示视频的页面。请注意，如果您想在网站上使用骨架加载技术，则需要使用 AJAX 插件来完整加载视频。在本例中，我们将实现骨架加载系统，而不会加载实际的视频。
首先，我们将编写HTML结构：
<!-- This div is used as a container -->
<div class="wrapper shine">
<!-- Title -->
<h2>Coming soon</h2>
<!-- Container of card (videos that load) -->
<div class="container">
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
</div>
<h2>Best sellers</h2>
<div class="container">
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
</div>
<h2>Recommended</h2>
<div class="container">
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
</div>
</div>
然后我们添加一些风格：
/* Fonts */
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap");
/* Style */
body {
background: #dedede;
}
.wrapper {
width: 900px;
max-width: 95%;
margin: 55px auto;
}
.wrapper h2 {
color: white;
letter-spacing: 1px;
margin: 10px 0 5px 10px;
font-family: "Roboto", sans-serif;
}
.wrapper .container {
display: flex;
flex-wrap: wrap;
align-content: center;
justify-content: flex-start;
align-items: center;
flex-direction: row;
}
.wrapper .container .card {
margin: 10px;
width: 160px;
height: 90px;
border-radius: 3px;
background-image: linear-gradient(90deg, #e2e2e2 0px, #efefef 30px, #e2e2e2 60px);
background-size: calc(160px + 160px);
animation: refresh 1.2s infinite ease-out;
}
/* Animation */
@keyframes refresh {
0% {
background-position: calc(-160px);
}
60%, 100% {
background-position: 160px;
}
}
最终结果如下所示：
如果要加载视频缩略图，您需要使用 AJAX。为此，强烈建议使用 jQuery，它可以简化请求并提高请求的可靠性。以下是一个 AJAX 示例代码：
html
<script>
$(document).ready(function() {
$(".card").load("https://www.site.com/videoCharging.php");
});
</script>
希望这篇教程对你有帮助，如果有任何问题，欢迎在评论区留言。👍
文章来源：https://dev.to/clementgaudiniere/create-a-sculpture-loading-m1h