javascript - 添加文本加载器的技术是什么？

Question

我想知道是否有文本加载器技术。我在一些网站上看到了这种效果。当 DOM 未完全加载时，会在某些文本中产生加载效果。我想知道那是不是图片，但最终这会导致网站无法快速加载。或者是将在完全加载的 DOM 上删除的设计边框。

这是示例图片:

因为找不到正确的方法。只是一点点想法或见解如何实现它会有所帮助。

Answer 1

我通过 javascript 使用 css 和 css transitions 属性应用了该效果。所以我认为这种效果是用 css 创建的，因为一些代码字节需要创建这种效果。所以文档不需要加载包含很多kb的图像文件。 这是我为您准备的示例代码:

 
function getPost(){
setTimeout(function(){
document.getElementById("demo").innerHTML="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo,";
}, 900)}
getPost();

#demo .text-plbar1 {
    height: 20px;
    width: 80%;
    display: block;
    margin-bottom: 10px;
}
#demo .text-plbar2 {
    height: 20px;
    width: 60%;
    display: block;
    margin-bottom: 10px;
}
#demo .text-plbar3 {
    height: 20px;
    width: 40%;
    display: block;
    margin-bottom: 10px;
}
#demo .text-plbar4 {
    height: 20px;
    width: 80%;
    display: block;
    margin-bottom: 10px;
}
@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;
        }

<div id="demo">
<div class="text-plbar1 animated-background"></div>
<div class="text-plbar2 animated-background "></div>
<div class="text-plbar3 animated-background "></div>
<div class="text-plbar4 animated-background "></div>
</div>

当您从数据库中获取数据时，您可以使用 php、ajax、javascript 应用此效果；