Set interval for RetinaJS - setinterval

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(icon#2x.png);
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);}