我们如何在页面中加载元素时制作这个预加载器

Question

这张来自 LinkedIn、Facebook、Discord 等的图片正在使用这个预加载器效果，我发现了这个：http://cloudcannon.com/deconstructions/2014/11/15/facebook-content-placeholder-deconstruction.html

但是我找不到更多关于这个的帖子

Answer 1

加载占位符并从服务器获取数据，从服务器获取数据后隐藏占位符。

// using timeout to illustrate a delay
    setTimeout(function () {
        $('.timeline-wrapper').hide();
        $('.show-data').show();
    }, 3000);

//    get your data from server here
//    $.post('getdata.php', function (data) {
//        // process your data here
//       hide placeholder
//       $('.timeline-wrapper').hide();
//    })

.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;
        }

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

        .animated-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: 800px 104px;
            height: 96px;
            position: relative;
        }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="timeline-wrapper">
    <div class="timeline-item">
        <div class="animated-background">
            <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>
<div class="show-data" style="display: none">
  <p>data from server</p>
</div>