I took the same approach when i was trying to figure out how to implement retina support on hi DPI devices but bundled it all into a jQuery plugin.

https://github.com/leonsmith/retina-replace-js

http://briancray.com/2011/05/05/detect-retina-displays-with-javascript/

I’ve pieced that together with the code your wrote below:

function highdpi_init() {
// Feature detect for hi-res devices
var hiRes = window.devicePixelRatio > 1 ? true : false;
// Replace imgs with hi-res version .hi-res class is detected
if (hiRes) {
var els = jQuery(“.hi-res”).get();
for(var i = 0; i < els.length; i++) {
var src = els[i].src
//alert(src);
src = src.replace(".jpg", "@2x.jpg");
src = src.replace(".png", "@2x.png");
src = src.replace(".gif", "@2x.gif");
els[i].src = src;
}
}
}

$(document).ready(function() {
highdpi_init();
});

This seems to work on the iPhone 4S, will test on the new iPad tomorrow.

The trick was to not actually have ANY images load by setting the img src to empty and having another param called url and put the original src value in there. Then I gave them the class retina if they had retina replacements and used this JS:

$(‘.retina’).each(function() {
var el = $(this);
var src = el.attr(‘url’);
if (el.css(‘font-size’) == ’1px’) {
src = src.replace(‘.png’, ‘@2x.png’);
}
el.attr(‘src’, src);
});

The result is it only fetches the correct image and surprisingly it happens quickly.

Also to avoid using jQuery on mobile I used Zepto.js which still gives me the $.jQuery style selectors.

Its snappy and works great.
The only trick is to make sure you put in those original non retina widths in your img tag.

The function, highdpi_init(), is being called no matter what. However, the code that actually does the image replacement is only executed if the retina.css file is loaded. This line here:

if(jQuery(‘.replace-2x’).css(‘font-size’) == “1px”) {

Will only evaluate to true if retina.css was included.

HTH.