devicePixelRatioの値によってimgタグのファイル名を書き換えるjQueryスニペット

2012年5月23日

CSSの背景画像はMedia Queryで分岐する事ができますが、HTMLに直接記述するimgタグでもdevicePixelRatioの値によって書き換わるjQueryスニペットです。

JS

$(function(){
var dpr = window.devicePixelRatio;
var onSrc = $('img').attr('src').replace('@', '@' + dpr);
$('img').attr('src', onSrc);
});

HTML

<img src="sample@.jpg" />

sample@.jpgの@の部分がdevicePixelRatioが1なら「sample@1.jpg」2なら「sample@2.jpg」みたいに書き換わります。
3行でかなり適当に作ったのでつっこみどころ満載やと思いますが、覚書としてメモ。