Set interval for RetinaJS

Question

I already have setInterval for the images changing on my website. My problem is that it is only the first image that is replaced with the retina image. How can I load my retina.js again when the other images is loaded? They are changing every 5 sec

I use the script from retinajs.com.

Answer 1

By using CSS media queries you can serve these high–resolution images automatically to retina devices.

 /*CSS for basic styling and non-retina image path:*/
    .icon{
        width: 100px;
        height: 100px;
        background-image: url(icon.png);
    }
    /*CSS for serving the retina image to devices with a high "device-pixel-ratio":*/
    @media only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-devicepixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx) {
        .icon{
            background-image: url([email protected]);
            background-size: 100px 100px;
        }
    }

UPDATED: - Cons(retina.js): If you are using retina.js you are serving normal-sized and @2x images to retina devices, which dramatically increases the loading time of your site. I cannot recommend using retina.js if you care about a fast loading time. - CSS media query (Pros): By adding a CSS media query that detects high-definition displays you can change the image path of the original background-image to the @2x image for those displays.

Update:

You might need to modify retina.js to work in slideshows.(See here https://github.com/imulus/retinajs/pull/26)

Modifying these lines

that.el.setAttribute('width', that.el.offsetWidth);
that.el.setAttribute('height', that.el.offsetHeight);

to this..

 if(that.el.hasAttribute('width')){
    that.el.setAttribute('width', that.el.offsetWidth);}
  if(that.el.hasAttribute('height')){
    that.el.setAttribute('height', that.el.offsetHeight);}