【问题标题】：Placeholder Loading Card not working correctly占位符加载卡无法正常工作
【发布时间】：2018-11-26 05:13:25
【问题描述】：
我尝试将我的 bootstrap 4 网站创建为占位符加载卡，我添加了示例图像但我遇到了一些问题，
网站加载时占位符不起作用，它总是动画
任何人都知道如何像这张图片一样正确地做到这一点
这是我的代码部分
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>
【问题讨论】：
标签：
html
css
bootstrap-4
contentplaceholder
【解决方案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>