Добавить Pre-Loader к адаптивному образу загрузочной карты?

Question

Я пытаюсь сделать так, чтобы при загрузке изображения в мою загрузочную карту у него было либо изображение-заполнитель (для сохранения размера карты), либо загрузочный счетчик. Я не могу понять, как это сделать, вот мой текущий 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, чтобы заменить текст Загрузка ... загруженным изображением загрузчика. А вот и изменение:

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