html - 哪些包或 html 用于创建页面加载指示器,这些指示器看起来像获取数据后将填充的数据
问题描述
我注意到现在有些网站能够在数据从服务器加载或获取之前所在的页面上具有一种元素填充器。
在某些情况下,它会稍微闪烁或略微动画,以表明数据正在填充页面的该区域。
这是什么,有没有它的包,等等?有没有它的名字,所以我可以用谷歌搜索它?
为了清楚起见,我不是在谈论微调器
前任。当您在其网站上加载页面时,Airbnb 会使用此方法。我也在 Okcupid.com 上看到它
解决方案
你在寻找这种类型的东西吗?我找到了一个链接,对此进行了一些解释,您应该看到。也可以在这个codepen上查看他们的演示。
据我所知,没有这种效果的库。它们是定制的东西。您可以通过键入“内容占位符效果”来谷歌它。您也可以参考此链接了解详细信息:https ://cloudcannon.com/deconstructions/2014/11/15/facebook-content-placeholder-deconstruction.html
const cardImage = document.querySelector('.card-image');
const cardTitle = document.querySelector('.card-title');
const cardDesc = document.querySelector('.card-description');
const renderCard = () => {
cardTitle.textContent = 'Card Title Yo!';
cardDesc.textContent = 'Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vero dicta repellat quibusdam assumenda at distinctio similique eos? Officiis voluptatem accusamus, id odit, quos eaque nemo, dicta quidem eum eligendi veritatis.';
createImage();
cardTitle.classList.remove('loading');
cardDesc.classList.remove('loading');
cardImage.classList.remove('loading');
};
function createImage() {
const img = new Image();
img.classList.add("image");
img.setAttribute('alt', 'A cloud day at a mountain base');
img.setAttribute('src', 'https://images.unsplash.com/photo-1516646255117-f9f933680173?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=dc874984018a4253ba7d2a3c53387135');
cardImage.appendChild(img);
}
setTimeout(() => {
renderCard();
}, 5000);
// window.addEventListener('load', () => {
// renderCard();
// });
body {
background: #f4f4f4;
margin: 0;
padding: 0;
font-family: system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue;
color: #333;
}
.container {
margin: 2rem auto;
max-width: 800px;
display: -webkit-box;
display: flex;
-webkit-box-pack: center;
justify-content: center;
}
.card {
overflow: hidden;
background: white;
border-radius: .25rem;
max-width: 380px;
width: 380px;
box-shadow: 0 15px 30px 0 rgba(0, 0, 0, 0.05), 0 5px 15px 0 rgba(0, 0, 0, 0.05);
-webkit-transition: ease box-shadow 0.3s;
transition: ease box-shadow 0.3s;
}
.card:hover {
box-shadow: 0 15px 60px 0 rgba(0, 0, 0, 0.08), 0 5px 25px 0 rgba(0, 0, 0, 0.08);
}
.card-detail {
padding: .5rem 1rem;
}
.card-detail h3 {
font-size: 1.5rem;
margin-bottom: none;
line-height: .09;
}
.card-detail p {
line-height: 1.3rem;
}
.card-image {
margin: 0;
padding: 0;
height: 200px;
overflow: hidden;
}
.card-image img {
max-width: 100%;
height: auto;
}
.loading {
position: relative;
background-color: #E2E2E2;
}
.loading.card-image {
border-radius: 0;
}
.loading::after {
display: block;
content: '';
position: absolute;
width: 100%;
height: 100%;
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
background: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(rgba(255, 255, 255, 0.2)), to(transparent));
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
-webkit-animation: loading 1.5s infinite;
animation: loading 1.5s infinite;
}
@-webkit-keyframes loading {
100% {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
}
@keyframes loading {
100% {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
}
.card-title.loading {
height: 1.8rem;
}
.card-image.image {
max-width: 100%;
height: auto;
}
.card-description.loading {
height: 80px;
}
<div class="container">
<section class="card">
<figure class="card-image loading"></figure>
<div class="card-detail">
<h3 class="card-title loading"></h3>
<p class="card-description loading"></p>
</div>
</section>
</div>
推荐阅读
- javascript - AJAX 回调未显示成功消息 - ASP.NET MVC C#
- r - 如何为模态对话框中呈现的对象运行观察函数?
- sql - 将数据从一个表传输到另一个相同的表
- ios - 订阅到期时删除 iOS VPN 配置
- snowflake-cloud-data-platform - 基于浏览器的 SSO ID 令牌有效性
- angular - 升级到 Angular 13 时从 @angular-eslint/schematics@12.6.1 接收对等体 @angular/cli@">= 12.0.0 < 13.0.0"
- docker - Docker入门教程,3000端口不运行app
- javascript - 渲染对象道具发送到子组件的问题
- php - 使用 POST 方法获取页面上的获取值后,如何使用过滤器 AZ 进行排序?
- python - 尝试将项目添加到模型时出现 Django FileNotFoundError