Установить интервал для RetinaJS

Question

У меня уже есть setInterval для изменения изображений на моем сайте. Моя проблема в том, что это только первое изображение, которое заменяется изображением сетчатки. Как я могу загрузить свой retina.js снова при загрузке других изображений? Они меняются каждые 5 секунд

Я использую скрипт от retinajs.com.

Answer 1

Используя медиазапросы CSS, вы можете автоматически подавать эти изображения высокого разрешения на устройства Retina.

 /*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([e-mail]);
            background-size: 100px 100px;
        }
    }

ОБНОВЛЕНО: - Минусы (retina.js): если вы используете retina.js, вы подаете изображения обычного размера и @2x на устройства retina, что значительно увеличивает время загрузки вашего сайта. Я не могу рекомендовать использовать retina.js, если вы заботитесь о быстрой загрузке. - Медиа-запрос CSS (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);}