前回のRetinaディスプレイ時に読み込む画像を切り替えるjQueryでは以下の通りRethina・非Retina画像のリクエストが発生して非効率なスクリプトとなってしまっていたので修正しました。

修正後のソースは以下の通り。

[html]

<p><img src="images/grey.png" data-original="images/logo.png" alt="" width="50" height="50" /></p>

[Javascript]

$(function(){
	$('img').each(function(){
		var src = $(this).attr('data-original');
		if(window.devicePixelRatio === 2) {
			$(this).attr('data-original', src.replace(/(\.jpg|\.png)/gi,'@2x$1'));
		} 
		$(this).attr('src', $(this).data('original'));
	});
});

img要素src属性にダミー画像を入れておき、カスタムデータ属性を用いて画像パスを格納しています。
3行目でカスタムデータ属性の値を取得。
4行目でRetinaディスプレイか判別。
Retinaディスプレイの場合5行目で画像パス変更。
7行目でダミー画像のsrc属性を書き換えて描画。

これで非Retina画像のリクエストを発生させることなくRetinaディスプレイ時にRetina用画像を表示することが出来ました・・・けどRetinaディスプレイ対応自体どんな手法が正しいのか分かっていないので詳しい方いらっしゃいましたらご教授お願いします。

2012/01/05追記

下記で記述しているスクリプトでは読み込み時に非Retina用画像のリクエストが発生してしまいます。
結果、無駄なリクエストとなるので非効率なスクリプトとなってしまいます。

2012/01/12追記

二重にリクエストが発生しないスクリプトをかいてみました。
Retinaディスプレイ時に読み込む画像を切り替えるjQueryその2

<p>3G用画像（50x50px）<br />
<img src="logo.png" alt="" width="50" height="50" /></p>
<p>Retina用画像（100x100px）<br />
<img src="logo@2x.png" alt="" width="50" height="50" /></p>                   

	$(function(){
		if(window.devicePixelRatio > 1) {
			$('img').each(function(){
				var src = $(this).attr('src');
				$(this).attr('src', src.replace(/(\.jpg|\.png)/gi,'@2x$1'));
			});
		}
	});
	

以上がRetinaディスプレイの場合のみに専用の画像を用いる処理となりますが、iOSシミュレータでの確認のみですので実機での動作及び処理が正しいかは保証しかねますのでご了承ください。
また、日本で発売されているAndroid端末の場合全てではありませんがwindow.devicePixelRatio値が1.5らしいのでAndroid用に1.5倍サイズの画像を作成して、それ用の分岐も用意しておいた方が良いかもしれません。