html - 将预加载器添加到响应式 Bootstrap 卡图像？

Question

我试图做到这一点，以便在我的 Bootstrap 卡中加载图像时，它有一个占位符图像(以保持卡的大小相同)或一个加载微调器。我不知道该怎么做，这是我当前的卡片 html:

<div class="card mb-4" data-clickable="true" data-href="#">
    <img class="card-img-top" src="https://via.placeholder.com/700x400" alt="Card image cap">

    <div class="card-body">
          <h5 class="card-title">John Doe</h5>
    </div>

    <div class="card-footer">
        <small class="text-muted">Last updated 3 mins ago</small>
    </div>
</div>

显然，占位符将被替换为完整图像，但我目前的问题是，在图像以慢速连接加载之前，卡片会崩溃，因为图像无法填充它。

Answer 1

好的，我猜这就是您想要的。首先运行输出并检查它是如何工作的。我希望你按照你的要求想要这个。

我包含了 JS 文件，然后是 CSS，然后是 HTML。它会首先显示正在加载... 文本，然后会在卡片上显示您的图像。

$(window).on('load', function(){
  setTimeout(showImage, 2000); 
});
function showImage(){
    $( ".card-lbl-top" ).fadeOut(500, function() {
     $(".card-img").append('<img class="card-img" id="img-card" src="https://via.placeholder.com/700x400" alt="Card image cap">');
  });  
}

  .loader,
        .loader:after {
            border-radius: 50%;
            width: 10em;
            height: 10em;
        }
        .loader {            
            margin: 60px auto;
            font-size: 10px;
            position: relative;
            text-indent: -9999em;
            border-top: 1.1em solid rgba(255, 255, 255, 0.2);
            border-right: 1.1em solid rgba(255, 255, 255, 0.2);
            border-bottom: 1.1em solid rgba(255, 255, 255, 0.2);
            border-left: 1.1em solid #ffffff;
            -webkit-transform: translateZ(0);
            -ms-transform: translateZ(0);
            transform: translateZ(0);
            -webkit-animation: load8 1.1s infinite linear;
            animation: load8 1.1s infinite linear;
        }
        @-webkit-keyframes load8 {
            0% {
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
            }
            100% {
                -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }
        @keyframes load8 {
            0% {
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
            }
            100% {
                -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }
        #loadingDiv {
            position:absolute;;
            top:0;
            left:0;
            width:100%;
            height:100%;
            background-color:#000;
        }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card mb-4" data-clickable="true" data-href="#">
    <div class="card-img"></div>
    <div class="card-lbl-top">Loading..</div>

    <div class="card-body">
          <h5 class="card-title">John Doe</h5>
    </div>

    <div class="card-footer">
        <small class="text-muted">Last updated 3 mins ago</small>
    </div>
</div>

编辑:

对于加载程序，请从链接下载您选择的任何图像:https://www.google.com/search?rlz=1C1CHBF_enIN870IN870&biw=1366&bih=657&tbm=isch&sxsrf=ACYBGNQOR87uoUNkaowBsmaX4woBJbxr5Q%3A1572240743786&sa=1&ei=Z322Xf_RL5u9rQHh77KgAQ&q=loading+gif&oq=loading+gif&gs_l=img.3..35i39j0i67j0j0i67j0l6.1962.1962..2270...0.0..0.139.139.0j1......0....1..gws-wiz-img.YRsD96fve2c&ved=0ahUKEwi_oaOYnb7lAhWbXisKHeG3DBQQ4dUDCAc&uact=5#imgrc=Oi3RjeMxzZDEAM :

当您将它下载到您的本地计算机时，您需要对您的 HTML 标记做一些小的更改，以将 Loading... 文本替换为您下载的加载程序图像。这是变化:

$(window).on('load', function(){
  setTimeout(showImage, 2000); 
});
function showImage(){
    $( ".card-lbl-top" ).fadeOut(500, function() {
     $(".card-img").append('<img class="card-img" id="img-card" src="https://via.placeholder.com/700x400" alt="Card image cap">');
  });  
}

.loader,
        .loader:after {
            border-radius: 50%;
            width: 10em;
            height: 10em;
        }
        .loader {            
            margin: 60px auto;
            font-size: 10px;
            position: relative;
            text-indent: -9999em;
            border-top: 1.1em solid rgba(255, 255, 255, 0.2);
            border-right: 1.1em solid rgba(255, 255, 255, 0.2);
            border-bottom: 1.1em solid rgba(255, 255, 255, 0.2);
            border-left: 1.1em solid #ffffff;
            -webkit-transform: translateZ(0);
            -ms-transform: translateZ(0);
            transform: translateZ(0);
            -webkit-animation: load8 1.1s infinite linear;
            animation: load8 1.1s infinite linear;
        }
        @-webkit-keyframes load8 {
            0% {
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
            }
            100% {
                -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }
        @keyframes load8 {
            0% {
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
            }
            100% {
                -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }
        #loadingDiv {
            position:absolute;;
            top:0;
            left:0;
            width:100%;
            height:100%;
            background-color:#000;
        }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card mb-4" data-clickable="true" data-href="#">
    <div class="card-img"></div>
    <div class="card-lbl-top"><img src="https://miro.medium.com/max/1158/1*9EBHIOzhE1XfMYoKz1JcsQ.gif"/></div>

    <div class="card-body">
          <h5 class="card-title">John Doe</h5>
    </div>

    <div class="card-footer">
        <small class="text-muted">Last updated 3 mins ago</small>
    </div>
</div>