Question

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

这是示例的图片：

由于我找不到正确的方法。只是一些想法或见解如何实现将是有帮助的。

Answer 1

我使用css和css transitions属性和javascript应用了这种效果。因此，我认为该效果是使用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来应用此效果；

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

1 个答案: