JavaScriptでダミー画像(プレースホルダー画像)を表示する「Holder.js」ライブラリの利用方法

サイトの開発段階で「本番用の画像はまだ用意できていない」等の理由によりダミー画像(プレースホルダー画像)を設置したいことがある。そのような場合ダミー画像作成サイトとかを利用しているがこれが面倒くさい。何とかならないか調べたところ「Holder.js」ライブラリで解決できるみたい。以下に利用方法をメモ。

Holder.js

公式サイト

http://holderjs.com/

GitHub

https://github.com/imsky/holder

CDN

CDNで使う場合は以下を記述する。

<script src="https://cdnjs.cloudflare.com/ajax/libs/holder/2.9.8/holder.min.js"></script>

サンプル

https://taitan916.info/sample/Holder.js/

通常のダミー画像以外にflickityを用いたスライダーも動作確認できる筈。

利用方法

基本的な使い方

以下のような形でimgタグを設置する。

<img src="holder.js/【横幅】x【縦幅】">

オプションについて

画像内のテキスト等オプション項目はこちらのページを参照すること。

サンプルページのソースコード

<div>
    <div>ダミー画像</div>
    <img src="holder.js/300x200">
</div>

<div>
    <div>スライダー</div>
    <div id="slider">
        <div><img src="holder.js/300x200?random=yes&text=test1"></div>
        <div><img src="holder.js/300x200?random=yes&text=test2"></div>
        <div><img src="holder.js/300x200?random=yes&text=test3"></div>
        <div><img src="holder.js/300x200?random=yes&text=test4"></div>
        <div><img src="holder.js/300x200?random=yes&text=test5"></div>
        <div><img src="holder.js/300x200?random=yes&text=test6"></div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/flickity@3.0.0/dist/flickity.pkgd.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/flickity@3.0.0/css/flickity.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/holder/2.9.8/holder.min.js"></script>
<script>
Holder.run();
const slider = new Flickity('#slider', {
    wrapAround: true,
});
</script>

ダミー画像表示しつつスライダーを設置するような場合「Holder.run()」を記述しないと正常に動作しない点に注意する。

参考サイト

https://stackoverflow.com/questions/37432521/swiper-with-holder-js