Когда загрузка содержимого Div завершена, как удалить заполнитель?

Question

<link rel="stylesheet" href="https://unpkg.com/placeholder-loading/dist/css/placeholder-loading.min.css">
<div class="ph-item">
    <div class="ph-col-12">
        <div class="ph-picture"></div>
        <div class="ph-row">
            <div class="ph-col-6 big"></div>
            <div class="ph-col-4 empty big"></div>
            <div class="ph-col-2 big"></div>
            <div class="ph-col-4"></div>
            <div class="ph-col-8 empty"></div>
            <div class="ph-col-6"></div>
            <div class="ph-col-6 empty"></div>
            <div class="ph-col-12"></div>
        </div>
    </div>
</div>

Вот мой код. Я использую заполнитель loding css. После загрузки содержимого Div Как удалить загрузчик заполнителя.

Answer 1

Просто вам нужно реализовать это как заполнитель для контента, которого еще нет, например, Ajax вызовы, рендеринг объектов (для других сред, таких как React, Vue. js ... et c ), для jQuery вы можете удалить это при загрузке страницы, или, возможно, использовать метод ajax.done() и так далее.

следующее может быть отправной точкой для вас:

$(document).ready(function() {
  setTimeout(function(){
    $('.ph-item').replaceWith( "<h2>New heading</h2><div>Content is ready!</div>" );
  }, 1000)
});

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/placeholder-loading/dist/css/placeholder-loading.min.css">
<div class="ph-item">
    <div class="ph-col-12">
        <div class="ph-picture"></div>
        <div class="ph-row">
            <div class="ph-col-6 big"></div>
            <div class="ph-col-4 empty big"></div>
            <div class="ph-col-2 big"></div>
            <div class="ph-col-4"></div>
            <div class="ph-col-8 empty"></div>
            <div class="ph-col-6"></div>
            <div class="ph-col-6 empty"></div>
            <div class="ph-col-12"></div>
        </div>
    </div>
</div>