Карта загрузки заполнителя не работает правильно - PullRequest
Новая
       48

Карта загрузки заполнителя не работает правильно

0 голосов
/ 26 ноября 2018

Я пытался создать свой сайт начальной загрузки 4 для карты загрузки местозаполнителя, я добавил образец изображения, но у меня возникла проблема,

заполнитель мест не работает при загрузке сайта, всегда ли он анимируется

кто-нибудь знает, как сделать это правильно, как это изображение

enter image description here

, это моя часть кода 

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>

1 Ответ

0 голосов
/ 28 ноября 2018

вам нужно отключить анимацию 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>
...