창 크기 변경시 배경 위치 변경으로 인해 이미지가 깜박임

Question

캐 러셀이 있는데 브라우저의 현재 너비를 기준으로 슬라이드 슬라이드의 위치를 ​​다시 잡아야합니다. 내가 따라야 할 규칙은 다음과 같습니다

browserWidth > 1200: do not reposition slide 
browserWidth > 960 && browserWidth < 1200: move slide background X position based 
              on the formula (25/48*browserWidth)-625 
browserWidth < 960: reposition background X position to -125px 

는 좀 자바 스크립트를 이렇게 썼다,하지만 브라우저의 크기를 조정할 때마다 이미지가 많이을 깜박이기 시작합니다. 컴퓨터가 고해상도이므로 배경 이미지를 다시 렌더링하는 데 문제가 있다고 가정합니다. 이 깜박이는 문제를 해결할 수있는 방법이 있습니까?

$(window).resize(function() { 
    var winW = $(window).width(); 
    if (winW > 960 && winW < 1200) { 
     $('#' + carouselID).css('left', '600px'); 
     var leftValue = ((25/48) * winW - 625) + 'px'; 
     var backgroundAtr = 'url(http://www.placehold.it/1200x800) ' + leftValue + ' top no-repeat'; 
     $('#' + carouselID + ' .slides .slide').css('background', backgroundAtr); 
    } else if (winW <= 960) { 
     $('#' + carouselID).css('left', '600px'); 
     var leftValue = '-125px'; 
     var backgroundAtr = 'url(http://www.placehold.it/1200x800) ' + leftValue + ' top no-repeat'; 
     $('#' + carouselID + ' .slides .slide').css('background', backgroundAtr); 
    } else if (winW >= 1200) { 
     $('#' + carouselID).css('left', '50%'); 
     var leftValue = 'left'; 
     var backgroundAtr = 'url(http://www.placehold.it/1200x800) ' + leftValue + ' top no-repeat'; 
     $('#' + carouselID + ' .slides .slide').css('background', backgroundAtr); 
    } 
}); 

Answer 1

timeout 안에 크기 조정 코드를 넣는 것이 좋습니다. 일부 브라우저는 여러 크기 조정 이벤트를 발생시키는 것을 좋아하는데 이는 깜박임이 발생하는 원인 일 수 있습니다. 다음과 같이 시도하십시오.

var timeout; 
$(window).resize(function() { 
    clearTimeout(timeout); 
    timeout = setTimeout(function() { 
     var winW = $(window).width(); 
     if (winW > 960 && winW < 1200) { 
      $('#' + carouselID).css('left', '600px'); 
      var leftValue = ((25/48) * winW - 625) + 'px'; 
      var backgroundAtr = 'url(http://www.placehold.it/1200x800) ' + leftValue + ' top no-repeat'; 
      $('#' + carouselID + ' .slides .slide').css('background', backgroundAtr); 
     } else if (winW <= 960) { 
      $('#' + carouselID).css('left', '600px'); 
      var leftValue = '-125px'; 
      var backgroundAtr = 'url(http://www.placehold.it/1200x800) ' + leftValue + ' top no-repeat'; 
      $('#' + carouselID + ' .slides .slide').css('background', backgroundAtr); 
     } else if (winW >= 1200) { 
      $('#' + carouselID).css('left', '50%'); 
      var leftValue = 'left'; 
      var backgroundAtr = 'url(http://www.placehold.it/1200x800) ' + leftValue + ' top no-repeat'; 
      $('#' + carouselID + ' .slides .slide').css('background', backgroundAtr); 
     } 
    }, 10); 
}); 

이렇게하면 우선 시간 초과가 지워집니다. 그런 다음 크기 조정 코드가 10ms 후에 실행되도록 설정합니다. 이것은 브라우저에게 호흡을 잡을 충분한 시간을 주어야하고, 다중 resize 이벤트를 중지하는 것을 중단해야합니다. 기본적으로 디버 밍 기능을 사용합니다.