簡単にスケルトンローディングを実装できる「phantom-ui」ライブラリの使用方法

あるサイトでページを読み込んだ際、最初は各レイアウトの枠組み的な部分を表示、次にレイアウト内のコンテンツはローディングっぽい表示、最後にコンテンツが表示されていた。調べたところスケルトンローディングといった技術らしくページ読み込みの体感速度を改善する効果があるらしい。以下にライブラリを使用した実装方法のメモ。

サンプル

https://taitan916.info/sample/phantom-ui/

ページ読み込み時は各部分がスケルトンローディングとなり、「ローディング解除」ボタンをクリックするとコンテンツが表示される。また、「スケルトンローディングさせないエリア」はローディング表示・解除に関わらずスケルトンローディングされない点が確認できる筈。

phantom-ui

Github

https://github.com/Aejkatappaja/phantom-ui

CDN

<script src="https://cdn.jsdelivr.net/npm/@aejkatappaja/phantom-ui/dist/phantom-ui.cdn.js"></script>

利用方法

ソースコード

スケルトンローディングさせたい箇所をphantom-uiタグで囲み、loading属性を付与するとスケルトンローディング表示、loading属性を削除するとスケルトンローディングが解除される。

<div class="container">
    <phantom-ui id="phantom" loading>
        <div class="card mt-3">
            <img src="holder.js/1000x300?theme=sky&text=サムネイル" class="card-img-top w-100">
            <div class="card-body">
                <h5 class="card-title">タイトル</h5>
                <p class="card-text">テキストテキストテキストテキストテキストテキストテキストテキスト</p>
                <p data-shimmer-ignore>スケルトンローディングさせないエリア</p>
                <a class="btn btn-success">ダミーボタン</a>
            </div>
        </div>
    </phantom-ui>

    <div class="mt-2">
        <a id="change" class="btn btn-primary">ローディング解除</a>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/@aejkatappaja/phantom-ui/dist/phantom-ui.cdn.js"></script>
<script>
$(function(){
    $(`#change`).on(`click`, function(){
        if( $(`#phantom`).prop(`loading`) ){
            $(`#phantom`).prop(`loading`, false)
            $(this).html(`ローディング表示`);
        }else{
            $(`#phantom`).prop(`loading`, true)
            $(this).html(`ローディング解除`);
        }
    });
});
</script>