勉強したことのメモ

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

  関連記事

JavaScriptにて領収書等のテンプレートHTMLページをPDFファイル化させる方法(html2pdf)

JavaScriptにてhtml2pdfというライブラリを使用することでHTML ...

LightboxをjQuery無しで実装できる「Luminous」の利用方法

あるサイトのコーディングデータを貰った際、jQueryは使用していないのにLig ...

バニラJavaScript対応の日時ピッカー「Flatpickr」ライブラリの利用方法

サイト内に日時ピッカーを実装する場合、jQueryの「DateTimePicke ...

JavaScriptにて「loglevel」ライブラリを利用して環境及びレベルによりログを出し分けする方法

JavaScriptにて何らかの確認の際にconsole.logを使うことが多い ...

パスワードの強度を判定できる「zxcvbn」ライブラリの使用方法

アカウントを作成するようなページで偶にパスワードの強度を判定してメーターで表示さ ...