jQuery : 브라우저 크기를 감지합니다

StackOverflow https://stackoverflow.com/questions/2031872

  •  19-09-2019
  •  | 
  •  

문제

Snipplr 에서이 스크립트를 사용하고 있습니다. 어떻게 컨테이너 DIV가 -100과 같은 NewWindowHeight 높이보다 100px가 적을 수 있도록 어떻게 설정합니까?

<script type="text/javascript" charset="utf-8">
$(document).ready(function(){

//If the User resizes the window, adjust the #container height
$(window).bind("resize", resizeWindow);
function resizeWindow( e ) {
    var newWindowHeight = $(window).height();
    $("#container").css("max-height", newWindowHeight );
}

});         
</script>
도움이 되었습니까?

해결책

발견 한 스크립트는 문제를 과도하게 복제했습니다. 다음은 저를 위해 일했습니다.

$(function(){

    // Cache reference to our container
    var $container = $("#container");

    // A function for updating max-height
    function updateMaxHeight () {
        $container.css("max-height", $(this).height() - 100);
    }

    // Call updateMaxHeight when browser resize event fires
    $(window).on("resize", updateMaxHeight);

});

한 가지 경고는 브라우저 크기를 조정할 때 크기 조정 이벤트가 많이 호출된다는 것입니다. 브라우저가 크기를 조정 한 후만 호출되는 것이 아닙니다. 결과적으로, 콜백 함수를 수백 번이라고 부를 수 있습니다. 이것은 일반적으로 나쁜 생각입니다.

해결책은 이벤트를 스로틀하거나 분비하는 것입니다. 스로틀 링은 콜백을 시간 내에 X 회 이상 (초에 5 배) 이상 발사하지 않음을 의미합니다. Defouncing은 특정 시간이 Last Resize 이벤트에서 통과 한 후 콜백을 발사하는 것을 의미합니다 (크기 조정 이벤트 후 500 밀리 초까지 기다립니다).

jQuery는 플러그인이 있지만 현재 스로틀 또는 디케이운스 옵션을 지원하지는 않습니다. 당신이 사용했을 수도있는 다른 인기있는 라이브러리에는 이러한 기능이 있습니다., 밑줄과 같은 :

$(function(){

    // Cache reference to our container
    var $container = $("#container");

    // A function for updating max-height
    function updateMaxHeight () {
        $container.css("max-height", $(this).height() - 100);
    }

    // Version of updateMaxHeight that will run no more than once every 200ms
    var updateMaxHeightThrottled = _.throttle(updateMaxHeight, 200);

    // Call updateMaxHeightThrottled when browser resize event fires
    $(window).on("resize", updateMaxHeightThrottled);

});

다른 팁

방금 "onresize"라는 HTML 이벤트를 보았습니다. 특히 태그에 속하는 것은이 사용법으로 더 많은 성능을 얻을 수 있습니다.

<body onresize="functionhere()">

나는 그것이 당신을 도울 수 있기를 바랍니다 ..

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top