30行でimg要素をダミー画像に置き換える

ダミー画像ごときで外部サービスに依存するのもあれだし、書いた。jQuery使ってるけど使ってないようなもの(?)。メインはcanvasなのでIE9+で動くんじゃないかな。

<img src="" width="160" height="60" alt="バナー">

と書くとこうなる。

いつもながら似たようなことを考える人はいるわけで、細かく設定したいとかSVGできれいに描画したいとかimg要素の属性群を使いたくないとかならそっちの方がよいかと。

Holder.js - client side image placeholders

コード

(function(){
    var canvas = document.createElement('canvas');
    var cache = {};
    $('img[src=""]').each(function(){
        var style = window.getComputedStyle(this);
        var opts = {
            width: this.getAttribute('width'),
            height: this.getAttribute('height'),
            text: this.alt,
            font: style.fontSize + ' ' + style.fontFamily
        };
        var key = JSON.stringify(opts);
        if(!cache[key]) {
            canvas.width = opts.width;
            canvas.height = opts.height;
            var ctx = canvas.getContext('2d');
            
            ctx.fillStyle = '#ccc';
            ctx.fillRect(0, 0, opts.width, opts.height);

            var drawText = '画像: ' + opts.text + ' (' + opts.width + 'x' + opts.height + ')';
            ctx.textAlign = 'center';
            ctx.textBaseline = 'middle';
            ctx.font = opts.font;
            ctx.fillStyle = '#333';
            ctx.fillText(drawText, opts.width / 2, opts.height / 2);
            cache[key] = canvas.toDataURL();
        }
        this.src = cache[key];
    });
})();