JavaScriptでダミー画像(プレースホルダー画像)を表示する「Holder.js」ライブラリの利用方法
サイトの開発段階で「本番用の画像はまだ用意できていない」等の理由によりダミー画像(プレースホルダー画像)を設置したいことがある。そのような場合ダミー画像作成サイトとかを利用しているがこれが面倒くさい。何とかならないか調べたところ「Holder.js」ライブラリで解決できるみたい。以下に利用方法をメモ。
目次
Holder.js
公式サイト
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で描写する方法(highstock)
株価か仮想通貨などの値動き(チャート)を図表とするローソク足のグラフを何らかの方 ...
-
jQuery UIでカレンダーピッカー(Datepicker)の利用方法
フォーム等で日付を入力する際にカレンダーピッカー機能を実装することがある。その際 ...
-
バニラJS対応(jQuery非依存)の画像スライダー系プラグイン「Flickity」の利用方法
画像スライダーを設置する場合「slick」プラグインを利用することが多い。ただ、 ...
-
CKEditor5(WYSIWYGエディタ)に画像アップロード機能を追加する方法
CKEditor5(ウィジウィグエディタ)に画像アップロード機能を追加したい。公 ...
-
JavaScriptのリッチなalert / confirmぽいウィンドウを表示する「sweetalert2」の利用方法
JavaScriptのalert / confirmはブラウザによって表示位置や ...