angularjs 如何创建占位符，同时加载像facebook

i5desfxk 于 2023-02-28 发布在 Angular

关注(0)|答案(4)|浏览(163)

如何创建后台加载线，就像facebook在使用angular js加载内容时所做的那样。

angularjs

来源：https://stackoverflow.com/questions/35151887/how-to-create-placeholder-while-loading-like-facebook

4条答案

按热度按时间

j0pj023g1#

你可以用一些css背景线性渐变：

@keyframes placeHolderShimmer{
    0%{
        background-position: -468px 0
    }
    100%{
        background-position: 468px 0
    }
}
.linear-background {
    animation-duration: 1s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-name: placeHolderShimmer;
    animation-timing-function: linear;
    background: #f6f7f8;
    background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
    background-size: 1000px 104px;
    height: 338px;
    position: relative;
    overflow: hidden;
}

<div class="linear-background">
  
  
</div>

用白色的div绘制效果：
一个二个一个一个
如果您需要执行多个操作，这可能会很费力，因此此库会自动执行以下操作：placeload.js

赞(0）回复(0）举报 2023-02-28

q1qsirdb2#

你可以看看这篇博客文章，它详细描述了Facebook上的占位符是如何工作的：
https://cloudcannon.com/blog/how-the-facebook-content-placeholder-works
本质上，你放入一些用css设计的静态html，使其看起来与即将发布的内容相似。

<div class="placeholder">
  <!-- some boxes in light grey to look like content -->
</div>

加载完成后，删除占位符：

$(".placeholder").remove();

赞(0）回复(0）举报 2023-02-28

f3temu5u3#

如果你们需要一个npm包来加载占位符动画，我做了这个：https://github.com/zalog/placeholder-loading
它是一个可以根据需要进行配置的库。
它React灵敏，快速，简单，gpu优化的动画和css的唯一。
演示：

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Demo placeholder-loading</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://unpkg.com/placeholder-loading/dist/css/placeholder-loading.min.css" rel="stylesheet">
  </head>
  <body>

    <div class="ph-item">

      <div class="ph-col-2">
        <div class="ph-avatar"></div>
      </div>

      <div>
        <div class="ph-row">
          <div class="ph-col-4"></div>
          <div class="ph-col-8 empty"></div>
          <div class="ph-col-6"></div>
          <div class="ph-col-6 empty"></div>
          <div class="ph-col-2"></div>
          <div class="ph-col-10 empty"></div>
        </div>
      </div>

      <div class="ph-col-12">
        <div class="ph-picture"></div>
        <div class="ph-row">
          <div class="ph-col-10 big"></div>
          <div class="ph-col-2 empty big"></div>
          <div class="ph-col-4"></div>
          <div class="ph-col-8 empty"></div>
          <div class="ph-col-6"></div>
          <div class="ph-col-6 empty"></div>
          <div class="ph-col-12"></div>
        </div>
      </div>

    </div>

  </body>
</html>

赞(0）回复(0）举报 2023-02-28

wwtsj6pe4#

npm i light-skeleton

https://www.npmjs.com/package/light-skeleton

const PreLoader = () => {
    let Hei = '100px';
    let MB = '15px';
    return (
      <React.Fragment>
        <TitleSkeleton 
          style={{ 
            margin: '5px', 
            marginBottom: MB
            }} 
          width={'90%'}
          height={Hei}
        />
        <TitleSkeleton 
          style={{ 
            margin: '5px', 
            marginBottom: MB
          }} 
          width={'90%'} 
          height={Hei}
        />
      </React.Fragment>
    )
  }

赞(0）回复(0）举报 2023-02-28

我来回答

angularjs 如何创建占位符，同时加载像facebook

4条答案

相关问题

热门标签

最新问答