Когда содержимое 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>

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

Answer 1

Просто вам нужно реализовать это как заполнитель для контента, которого еще нет, например, вызовов Ajax, объектов рендеринга (для других фреймворков, таких как React, Vue.js ... и т. Д.), Для 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>