1

I have a mobile site running with jQuery Mobile. I want to have standard images for non-retina (devices without a high pixel density) devices, but want those images replaced with retina (high pixel density) images that are 2x the size of the original when viewed on a high pixel density device. I found this article here: http://flowz.com/2010/07/css-image-replacement-for-iphone-4-high-dpi-retina-display/

My jQuery for the implementation looks for images with class="replace-2x", and replaces the standard image with one at the same path with @2x added to the file name. So logo.png would be replaced with logo@2x.png on a Retina device. My jQuery looks like this:

function highdpi_init() {
    if(jQuery('.replace-2x').css('font-size') == "1px") {
        var els = jQuery(".replace-2x").get();
        for(var i = 0; i < els.length; i++) {
            var src = els[i].src
            src = src.replace(".png", "@2x.png");
            els[i].src = src;
        }
    }
}
jQuery(document).ready(function() {
    highdpi_init();
});

When the page loads however, this function is not being called or working (one or the other) so I'm not sure if I need something like $(".page").live('pageinit', function() { instead or what so that the function fires or "works" when the page loads? Help?? :)

adamdehaven
  • 5,890
  • 10
  • 61
  • 84
  • Try using the inbuild `jQuery(".replace-2x").attr("src", newImageName)`, to reduce sources of error. – devsnd Apr 05 '12 at 13:24
  • Can you explain? I'm not sure what you mean or where to put this? – adamdehaven Apr 05 '12 at 13:28
  • Basically, what @twall is suggesting is to manipulate the JQuery object rather than the DOM element. I'll add to my answer below, as the comment section isn't large enough. – saluce Apr 05 '12 at 13:38
  • If you place SRC for IMG by default your Retina users will download both versions of image (lots of bytes). There is a trick via image onload event, more info at http://stackoverflow.com/a/19443428/304371 – Artur A Oct 19 '13 at 19:23

1 Answers1

3

In JQuery mobile, you need to use the pageinit, because the ready function is only called once; every other page is loaded via Ajax, which won't trigger a ready event. See JQuery Mobile Events for more information.

function highdpi_init() {
    $(".replace-2x").each(function () {
        if ($(this).css("font-size") == "1px") {           
            var src = $(this).attr("src");
            $(this).attr("src", src.replace(/(@2x)*.png/i, "@2x.png").replace(/(@2x)*.jpg/i, "@2x.jpg"));
            $(this).removeClass('replace-2x')
        }
});

$(".ui-page").live('pageinit',function(event){
    highdpi_init();
});
saluce
  • 13,035
  • 3
  • 50
  • 67
  • So how would I implement that in my code? Could you provide code? – adamdehaven Apr 05 '12 at 13:28
  • You basically provided the code. Here, I'm just binding to the ui-page class (which represents the page in JQueryMobile). – saluce Apr 05 '12 at 13:34
  • If I want to replace `.png` AND `.jpg`, what code would I add? – adamdehaven Apr 05 '12 at 13:41
  • 1
    change the line `src = src.replace(".png", "@2x.png").replace(".jpg", "@2x.jpg")` – saluce Apr 05 '12 at 13:43
  • How/where did you implement it? For me, it's not displaying the image on my iPhone 4S. – adamdehaven Apr 05 '12 at 14:51
  • I'm now running into an issue where the replace function is running more than once. So for example, it replaces `logo.png` with `logo@2x.png`, but then as the page continues to load, it KEEPS replacing `.png` with `@2x.png` over and over so that the image tag ends up looking like this: `logo` – adamdehaven Apr 05 '12 at 15:37
  • let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/9739/discussion-between-saluce-and-adamdehaven) – saluce Apr 05 '12 at 16:16