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

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

$(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>

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

1 个答案: