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
関連記事
-
-
「slick」でスライダー中央の下部にのみ指定したコンテンツを表示する方法
「slick」でスライダー画像の下部に何らかのコンテンツ(テキスト・リンク・別画 ...
-
-
パスワードの強度を判定できる「zxcvbn」ライブラリの使用方法
アカウントを作成するようなページで偶にパスワードの強度を判定してメーターで表示さ ...
-
-
JavaScriptにて数値の書式設定と操作を行える「Numerical.js」ライブラリの利用方法
以前JavaScriptで数値のカンマ区切り化とカンマ区切りの解除を行う方法をメ ...
-
-
FileReader APIを用いて画像をアップロードせずにサムネイル表示
以前にFile APIを用いてファイル名やサイズ、形式(拡張子)を取得するメモを ...
-
-
CKEditor5(WYSIWYGエディタ)に画像アップロード機能を追加する方法
CKEditor5(ウィジウィグエディタ)に画像アップロード機能を追加したい。公 ...