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

更新： - 缺点（retina.js）：如果你正在使用retina.js，你正在服务正常大小和@ 2x图像到视网膜设备，这是显着的增加您网站的加载时间。我不推荐使用 retina.js如果你关心快速加载时间。 - CSS媒体查询（优点）：通过添加检测到的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);}

设置RetinaJS的间隔

1 个答案: