RetinaJS的设置间隔

Question

我已经在我的网站上的图片更改的setInterval。我的问题是，这只是第一张被视网膜图像取代的图像。当加载其他图像时，如何再次加载retina.js？他们每5秒更换一次

我使用来自retinajs.com的脚本。

Answer 1

通过使用CSS媒体查询，您可以自动向视网膜设备提供这些高分辨率图像。

 /*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;
        }
    }

更新：- Cons( retina.js )：如果您使用的是retina.js，您正在为视网膜设备提供正常大小和@2x图像，这将大大增加站点的加载时间。如果您关心快速加载时间，我不能建议您使用retina.js。CSS媒体查询( CSS media query，Pros)：通过添加检测高清晰度显示的CSS媒体查询，您可以将原始背景图像的图像路径更改为这些显示的@2x图像。

更新：

您可能需要修改retina.js以在幻灯片中工作。(参见此处https://github.com/imulus/retinajs/pull/26)

修改这些行

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

为了这个..。

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