勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

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

 - JavaScript

  関連記事

jQueryのトースト(通知)用ライブラリ「iziToast.js」の利用方法

システム構築の際、エラー表示をJavaScriptのアラートではなくトースト(通 ...

CKEditor5(WYSIWYGエディタ)に画像アップロード機能を追加する方法

CKEditor5(ウィジウィグエディタ)に画像アップロード機能を追加したい。公 ...

サイトをダークモード対応させる「Darkmode.js」ライブラリの利用方法

サイトをダークモード対応させる場合、CSSで色々指定しないといけないと思っていた ...

JavaScriptでランダムなカラーコードを生成する「RandomColor」ライブラリの利用方法

先日PHPでランダムなカラーコードを生成する「RandomColor.php」ラ ...

JavaScriptのHTTPクライアントライブラリ「AXIOS」の使い方

あるサイトのソースコードを拝見しているとAXIOSというJSファイルをCDN呼び ...