卡片的 UI/内容加载器（如 fb）

Posted 2023-05-07

【中文标题】卡片的 UI/内容加载器（如 fb）

【英文标题】：UI/Content loader for cards (like fb)

【发布时间】：2014-11-21 17:56:38

【问题描述】：

我正在为我的应用寻找 UI/CONTENT 加载器的解决方案，以加载带有内容的卡片。

我们正在使用 Angular，当卡片加载时，它们是空白且无聊的。试图为将要使用它的人建立一些内容期望，就像 facebook 所做的那样。他们做得很好。

这里是截图的链接：

我知道有一些非常简单的解决方案，过去几个小时我一直在寻找各种“预加载器”，但我一直在寻找加载整个页面的方法。我希望只完成个别卡片本身，因为该应用从未真正“刷新”整个页面。

希望我解释得很好（我是设计师）。

更新：这在 facebook 中非常短暂地发生

【问题讨论】：

我不得不说这个问题太宽泛了，你应该展示一些你一直在处理的“代码”，但是一个选项可以是加载一个带有 css 的简单 div（可能是一个框显示）当你加载数据时，你可以通过结合 ng-cloak 和资源承诺来做很多事情

感谢您回答@jack.the.ripper ...这不是我希望的答案。目前我们还没有实现预加载器...

【参考方案1】：

我想你是在问这个解决方案

我已经在链接jsfiddler上创建了

@-webkit-keyframes placeHolderShimmer
        0%
            background-position:-468px 0
        
        100%
            background-position:468px 0
        
    

    @keyframes placeHolderShimmer
        0%
            background-position:-468px 0
        
        100%
            background-position:468px 0
        
    

    .timeline-wrapper 
        background-color: #e9eaed;
        color: #141823;
        padding: 20px;
        border: 1px solid #ccc;
        margin: 0 auto 1em;
    

    .timeline-item 
        background: #fff;
        border: 1px solid;
        border-color: #e5e6e9 #dfe0e4 #d0d1d5;
        border-radius: 3px;
        padding: 12px;

        margin: 0 auto;
        max-width: 472px;
        min-height: 200px;
    

    .animated-background 
        -webkit-animation-duration: 1s;
        animation-duration: 1s;
        -webkit-animation-fill-mode: forwards;
        animation-fill-mode: forwards;
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
        -webkit-animation-name: placeHolderShimmer;
        animation-name: placeHolderShimmer;
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
        background: #f6f7f8;
        background: #eeeeee;
        background: -webkit-gradient(linear, left top, right top, color-stop(8%, #eeeeee), color-stop(18%, #dddddd), color-stop(33%, #eeeeee));
        background: -webkit-linear-gradient(left, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
        background: linear-gradient(to right,  #eeeeee 8%,#dddddd 18%,#eeeeee 33%);
        -webkit-background-size: 800px 104px;
        background-size: 800px 104px;
        height: 96px;
        position: relative;
    

    .background-masker 
        background: #fff;
        position: absolute;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    

    .outlined .background-masker 
        border: 1px solid #ddd;
    


    .outlined:hover .background-masker 
        border: none;
    

    .outlined:hover .background-masker:hover 
        border: 1px solid #ccc;
        z-index: 1;
    

    .background-masker.header-top,
    .background-masker.header-bottom,
    .background-masker.subheader-bottom 
        top: 0;
        left: 40px;
        right: 0;
        height: 10px;
    

    .background-masker.header-left,
    .background-masker.subheader-left,
    .background-masker.header-right,
    .background-masker.subheader-right 
        top: 10px;
        left: 40px;
        height: 8px;
        width: 10px;
    

    .background-masker.header-bottom 
        top: 18px;
        height: 6px;
    

    .background-masker.subheader-left,
    .background-masker.subheader-right 
        top: 24px;
        height: 6px;
    


    .background-masker.header-right,
    .background-masker.subheader-right 
        width: auto;
        left: 300px;
        right: 0;
    

    .background-masker.subheader-right 
        left: 230px;
    

    .background-masker.subheader-bottom 
        top: 30px;
        height: 10px;
    

    .background-masker.content-top,
    .background-masker.content-second-line,
    .background-masker.content-third-line,
    .background-masker.content-second-end,
    .background-masker.content-third-end,
    .background-masker.content-first-end 
        top: 40px;
        left: 0;
        right: 0;
        height: 6px;
    

    .background-masker.content-top 
        height:20px;
    

    .background-masker.content-first-end,
    .background-masker.content-second-end,
    .background-masker.content-third-end
        width: auto;
        left: 380px;
        right: 0;
        top: 60px;
        height: 8px;
    

    .background-masker.content-second-line  
        top: 68px;
    

    .background-masker.content-second-end 
        left: 420px;
        top: 74px;
    

    .background-masker.content-third-line 
        top: 82px;
    

    .background-masker.content-third-end 
        left: 300px;
        top: 88px;
    

<body class="no-touch">
		
		<section>
	<div class="container post-container text-container">
		
<div class="timeline-wrapper">
    <div class="timeline-item">
        <div class="animated-background facebook">
            <div class="background-masker header-top"></div>
            <div class="background-masker header-left"></div>
            <div class="background-masker header-right"></div>
            <div class="background-masker header-bottom"></div>
            <div class="background-masker subheader-left"></div>
            <div class="background-masker subheader-right"></div>
            <div class="background-masker subheader-bottom"></div>
            <div class="background-masker content-top"></div>
            <div class="background-masker content-first-end"></div>
            <div class="background-masker content-second-line"></div>
            <div class="background-masker content-second-end"></div>
            <div class="background-masker content-third-line"></div>
            <div class="background-masker content-third-end"></div>
        </div>
    </div>
	 <div class="timeline-item">
        <div class="animated-background facebook">
            <div class="background-masker header-top"></div>
            <div class="background-masker header-left"></div>
            <div class="background-masker header-right"></div>
            <div class="background-masker header-bottom"></div>
            <div class="background-masker subheader-left"></div>
            <div class="background-masker subheader-right"></div>
            <div class="background-masker subheader-bottom"></div>
            <div class="background-masker content-top"></div>
            <div class="background-masker content-first-end"></div>
            <div class="background-masker content-second-line"></div>
            <div class="background-masker content-second-end"></div>
            <div class="background-masker content-third-line"></div>
            <div class="background-masker content-third-end"></div>
        </div>
    </div>
</div>