Retina Images not being loaded on sencha touch

Question

I've included retina.js in my Sencha Touch application. When watching the network monitor I see

• retina.js is loaded
• images are loaded normaly example.jpg
• no @2x images are loaded example@2x.jpg or even looked for

Using chrome to emulate an iphone this is all I see

I also manually ran Retina.init(window) however nothing happens. All images remain non-retina. Running Retina.isRetina() returns true

I don't actually own a retina device, so I am not sure if that is the issue. However my friend with an iPhone 5s says the image quality has not improved, so I am assuming the retina images are not showing up.

The documentation is not very helpful

I figure this has to do with the fact that images are created and loaded with JS (the images are not there onload)

Using chrome for debugging, how can I make retina.js work for my app?

Answer 1

OK, so I used a small part of the retina.js file and created a new class, it uses the isRetina function to tell weather the devicePixelRatio is higher than 1.

Ext.define('MyApp.Retina', {
  singleton: true,
  isRetina : function(){
    var mediaQuery = "(-webkit-min-device-pixel-ratio: 1.5),\
                      (min--moz-device-pixel-ratio: 1.5),\
                      (-o-min-device-pixel-ratio: 3/2),\
                      (min-resolution: 1.5dppx)";

    if (window.devicePixelRatio > 1)
      return true;

    if (window.matchMedia && window.matchMedia(mediaQuery).matches)
      return true;

    return false;
  },
  getSrc: function(url){
    return this.isRetina()? [url.slice(0, -4), '@2x', url.slice(-4)].join(''): url;
  }
});

Now throughout my sencha app I create images with MyApp.Retina.('http://example.com/foo.jpg') as src value, when the device is retina the function returns http://example.com/foo@2x.jpg