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

업데이트 : - 단점 (retina.js) : 당신은 극적으로 사이트의 로딩 시간이 증가하면 망막 장치에 정상 크기 및 @ 배 이미지를 제공하는 retina.js를 사용하는 경우 . 빠른 로딩 시간을 염려한다면 retina.js를 사용하지 않는 것이 좋습니다. - CSS 미디어 쿼리 (장점) : 고화질 디스플레이를 감지하는 CSS 미디어 쿼리를 추가하면 원래 배경 이미지의 이미지 경로를 해당 디스플레이의 @ 2x 이미지로 변경할 수 있습니다.

업데이트 :

당신은 슬라이드 쇼에서 일할 retina.js을 수정해야 할 수도 있습니다

이 라인이에

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

수정 (여기 https://github.com/imulus/retinajs/pull/26 참조) ..

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

합니다.