jquery - 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 内容后如何删除占位符加载程序。

标签： jquerycssplaceholder

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>