Webサイトのモックアップを作っていて便利なのがダミーの画像です。多くのダミー画像提供サービスがありますが、難点としてオンラインでないと使えないという問題があります。ダミー画像サイトが落ちているために見栄えが悪くなるのも残念です。 そこで使ってみたいのがクライアントサイドでダミー画像を生成するplaceholder.jsです。

placeholder.jsの使い方

placeholder.jsを適用した例です。

<img id="img_holder" src=""/>
<script type="text/javascript">
  var opts = {
    size: '256x128',
    font: {
        style: 'oblique',
    },
    text: 'Hello=&World'
  }
  document.getElementById('img_holder').setAttribute('src', window.placeholder.getData(opts));
</script>

テキストを指定すれば、画像の上にテキストが表現されます。

JavaScriptでなくともimgタグの要素を使って指定もできます。

<img options="size=256x128&text=Hello%2525%26%3DWorld" class="placeholder" options="bgcolor=#2b5f07&text=%20&size=19x19"/>
<script type="text/javascript">
    placeholder.render();
</script>

よくあるダミー画像のように画像サイズを表示するだけでは物足りなく感じることもあるでしょう。placeholder.jsであればどういった情報を載せるかをテキストで指示することもできます。Webサイトをデザインする際には大いに役立つそうです。

placeholder.jsはJavaScript製のオープンソース・ソフトウェア（MIT License）です。

placeholder.js - Client side image placeholders / placeholder.cn - Quick and simple image placeholders image-placeholder.js DEMO hustcc/placeholder.js: < 1Kb library to generate image placeholders on client side