占位符加载卡无法正常工作

Question

我试图创建我的 bootstrap 4 网站到 Placeholder Loading Card，我添加了示例图片，但我遇到了一些问题，

网站加载时占位符不工作，它是否总是动画

任何人都知道如何像这张图片一样正确地做到这一点

那是我的代码部分

body {
  padding: 20px;
}

.container {
  display: flex;
  border: 1px solid #eaecef;
  height: 200px;
  padding: 1%;
  background-color: white;
  box-shadow: 2px 5px 5px 1px lightgrey;
}

.img-container {
  width: 15%;
  padding: 20px;
}

.img {
  border: 1px solid white;
  width: 100%;
  height: 100%;
  background-color: #babbbc;
}

.content {
  border: 1px solid white;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  padding: 20px;
  justify-content: space-between;
}

.stripe {
  border: 1px solid white;
  height: 20%;
  background-color: #babbbc;
}

.small-stripe {
  width: 40%;
}

.medium-stripe {
  width: 70%;
}

.long-stripe {
  width: 100%;
}

.container.loading .img, .container.loading .stripe {
  animation: hintloading 2s ease-in-out 0s infinite reverse;
  -webkit-animation: hintloading 2s ease-in-out 0s infinite reverse;
}

@keyframes hintloading
{
  0% {
    opacity: 0.5;
  }
  50%  {
    opacity: 1;
  }
  100% {
    opacity: 0.5;
  }
}

@-webkit-keyframes hintloading
{
  0% {
    opacity: 0.5;
  }
  50%  {
    opacity: 1;
  }
  100% {
    opacity: 0.5;
  }
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<div class='container loading'>
  <div class='img-container'>
    <div class='img'>
      <img  src="https://image.freepik.com/free-photo/group-of-diverse-people-having-a-business-meeting_53876-25060.jpg">
    </div>
  </div>
  <div class='content'>
    <div class='stripe small-stripe'>wewe
    </div>
    <div class='stripe medium-stripe'>ewe
    </div>
    <div class='stripe long-stripe'>wewe
    </div>
  </div>
</div>

Answer 1

您需要在页面结束加载后禁用内容占位符动画：

$(document).ready(function(){
    $(".container.loading .img, .container.loading .stripe").css("animation", "none");
    $(".container.loading .img, .container.loading .stripe").css("-webkit-animation", "none");
})

body {
  padding: 20px;
}

.container {
  display: flex;
  border: 1px solid #eaecef;
  height: 200px;
  padding: 1%;
  background-color: white;
  box-shadow: 2px 5px 5px 1px lightgrey;
}

.img-container {
  width: 15%;
  padding: 20px;
}

.img {
  border: 1px solid white;
  width: 100%;
  height: 100%;
  background-color: #babbbc;
}

.content {
  border: 1px solid white;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  padding: 20px;
  justify-content: space-between;
}

.stripe {
  border: 1px solid white;
  height: 20%;
  background-color: #babbbc;
}

.small-stripe {
  width: 40%;
}

.medium-stripe {
  width: 70%;
}

.long-stripe {
  width: 100%;
}

.container.loading .img, .container.loading .stripe {
  animation: hintloading 2s ease-in-out 0s infinite reverse;
  -webkit-animation: hintloading 2s ease-in-out 0s infinite reverse;
}

@keyframes hintloading
{
  0% {
    opacity: 0.5;
  }
  50%  {
    opacity: 1;
  }
  100% {
    opacity: 0.5;
  }
}

@-webkit-keyframes hintloading
{
  0% {
    opacity: 0.5;
  }
  50%  {
    opacity: 1;
  }
  100% {
    opacity: 0.5;
  }
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>

<div class='container loading'>
  <div class='img-container'>
    <div class='img'>
      <img  src="https://image.freepik.com/free-photo/group-of-diverse-people-having-a-business-meeting_53876-25060.jpg">
    </div>
  </div>
  <div class='content'>
    <div class='stripe small-stripe'>wewe
    </div>
    <div class='stripe medium-stripe'>ewe
    </div>
    <div class='stripe long-stripe'>wewe
    </div>
  </div>
</div>

为了查看 Content PlaceHolder 的效果，我做了这个示例，其中数据将在 3 秒后加载：

loadData = function(){
  setTimeout(function(){
     $(".content div").html("wewe");
     $(".img img").attr('src', 'https://image.freepik.com/free-photo/group-of-diverse-people-having-a-business-meeting_53876-25060.jpg');

     $(".container.loading .img, .container.loading .stripe").css("animation", "none");
     $(".container.loading .img, .container.loading .stripe").css("-webkit-animation", "none");
  }, 3000);
}

loadData();

body {
  padding: 20px;
}

.container {
  display: flex;
  border: 1px solid #eaecef;
  height: 200px;
  padding: 1%;
  background-color: white;
  box-shadow: 2px 5px 5px 1px lightgrey;
}

.img-container {
  width: 15%;
  padding: 20px;
}

.img {
  border: 1px solid white;
  width: 100%;
  height: 100%;
  background-color: #babbbc;
}

.content {
  border: 1px solid white;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  padding: 20px;
  justify-content: space-between;
}

.stripe {
  border: 1px solid white;
  height: 20%;
  background-color: #babbbc;
}

.small-stripe {
  width: 40%;
}

.medium-stripe {
  width: 70%;
}

.long-stripe {
  width: 100%;
}

.container.loading .img, .container.loading .stripe {
  animation: hintloading 2s ease-in-out 0s infinite reverse;
  -webkit-animation: hintloading 2s ease-in-out 0s infinite reverse;
}

@keyframes hintloading
{
  0% {
    opacity: 0.5;
  }
  50%  {
    opacity: 1;
  }
  100% {
    opacity: 0.5;
  }
}

@-webkit-keyframes hintloading
{
  0% {
    opacity: 0.5;
  }
  50%  {
    opacity: 1;
  }
  100% {
    opacity: 0.5;
  }
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>

<div class='container loading'>
  <div class='img-container'>
    <div class='img'>
      <img>
    </div>
  </div>
  <div class='content'>
    <div class='stripe small-stripe'>
    </div>
    <div class='stripe medium-stripe'>
    </div>
    <div class='stripe long-stripe'>
    </div>
  </div>
</div>

占位符加载卡无法正常工作

Placeholder Loading Card not working correctly

html

css

contentplaceholder

bootstrap-4