창 크기 조정에 대한 jQuery

창 크기 조정에 대한 jQuery

다음과 같은 JQuery 코드가 있습니다.

$(document).ready(function () {
    var $containerHeight = $(window).height();
    if ($containerHeight <= 818) {
        $('.footer').css({
            position: 'static',
            bottom: 'auto',
            left: 'auto'
        });
    }
    if ($containerHeight > 819) {
        $('.footer').css({
            position: 'absolute',
            bottom: '3px',
            left: '0px'
        });
    }
});

유일한 문제는 브라우저가 처음 로드될 때만 작동한다는 것입니다.containerHeight창 크기를 조정할 때도 확인해야 합니까?

아이디어 있어요?

다음은 jQuery, javascript 및 css를 사용하여 크기 조정 이벤트를 처리하는 예입니다.
(크기 조정(미디어 쿼리)에 대한 항목을 스타일리시하게 만드는 것이 최선이라면 선택하십시오.)
http://jsfiddle.net/CoryDanielson/LAF4G/

CSS

.footer 
{
    /* default styles applied first */
}

@media screen and (min-height: 820px) /* height >= 820 px */
{
    .footer {
        position: absolute;
        bottom: 3px;
        left: 0px;
        /* more styles */
    }
}

자바스크립트

window.onresize = function() {
    if (window.innerHeight >= 820) { /* ... */ }
    if (window.innerWidth <= 1280) {  /* ... */ }
}

jQuery

$(window).on('resize', function(){
    var win = $(this); //this = window
    if (win.height() >= 820) { /* ... */ }
    if (win.width() >= 1280) { /* ... */ }
});

크기 조정 코드가 자주 실행되지 않도록 하려면 어떻게 해야 합니까?

크기를 조정하기 위해 바인딩할 때 첫 번째 문제가 발생합니다.사용자가 브라우저의 크기를 수동으로 조정할 때 크기 조정 코드가 LOT로 호출되며, 상당히 불편함을 느낄 수 있습니다.

크기 조정 코드가 호출되는 빈도를 제한하려면 밑줄 및 lodash 라이브러리에서 디바운스 또는 스로틀 방법을 사용할 수 있습니다.

• debounce마지막 크기 조정 이벤트 후 크기 조정 코드 X(밀리초)만 실행됩니다.이것은 사용자가 브라우저 크기 조정을 마친 후 크기 조정 코드를 한 번만 호출하려는 경우에 적합합니다.모든 크기 조정 이벤트를 업데이트하는 데 비용이 많이 들 수 있는 그래프, 차트 및 레이아웃을 업데이트하는 데 유용합니다.
• throttle에서는 크기 조정 코드가 X밀리초마다 실행됩니다.코드가 호출되는 빈도를 "스로틀링"합니다.이 기능은 크기 조정 이벤트에서 자주 사용되지는 않지만 주의할 가치가 있습니다.

언더스코어나 lodash가 없는 경우, 비슷한 솔루션인 JavaScript/JQuery: $(윈도우)를 직접 구현할 수 있습니다.크기 조정이 완료된 후에는 어떻게 작동합니까?

Javascript를 함수로 이동한 다음 해당 함수를 창 크기 조정에 바인딩합니다.

$(document).ready(function () {
    updateContainer();
    $(window).resize(function() {
        updateContainer();
    });
});
function updateContainer() {
    var $containerHeight = $(window).height();
    if ($containerHeight <= 818) {
        $('.footer').css({
            position: 'static',
            bottom: 'auto',
            left: 'auto'
        });
    }
    if ($containerHeight > 819) {
        $('.footer').css({
            position: 'absolute',
            bottom: '3px',
            left: '0px'
        });
    }
}

이 솔루션을 사용해 보십시오.페이지가 로드된 후 미리 정의된 시간에 창 크기 조정 중에만 실행됩니다.resizeDelay.

$(document).ready(function()
{   
   var resizeDelay = 200;
   var doResize = true;
   var resizer = function () {
      if (doResize) {

        //your code that needs to be executed goes here

        doResize = false;
      }
    };
    var resizerInterval = setInterval(resizer, resizeDelay);
    resizer();

    $(window).resize(function() {
      doResize = true;
    });
});

jQuery에는 창의 .resize()에 연결할 수 있는 크기 조정 이벤트 핸들러가 있습니다.그래서 만약에.$(window).resize(function(){/* YOUR CODE HERE */})그러면 창 크기가 조정될 때마다 코드가 실행됩니다.

따라서 첫 페이지 로드 후 및 창 크기가 조정될 때마다 코드를 실행하는 것이 좋습니다.따라서 코드를 자체 함수로 가져와서 두 인스턴스 모두에서 해당 함수를 실행해야 합니다.

// This function positions the footer based on window size
function positionFooter(){
    var $containerHeight = $(window).height();
    if ($containerHeight <= 818) {
        $('.footer').css({
            position: 'static',
            bottom: 'auto',
            left: 'auto'
        });
    }
    else {
        $('.footer').css({
            position: 'absolute',
            bottom: '3px',
            left: '0px'
        });
    } 
}

$(document).ready(function () {
    positionFooter();//run when page first loads
});

$(window).resize(function () {
    positionFooter();//run on every window resize
});

참조: 브라우저 간 창 크기 조정 이벤트 - JavaScript / jQuery

익명 함수에 이름을 지정한 다음:

$(window).on("resize", doResize);

http://api.jquery.com/category/events/

function myResizeFunction() {
  ...
}

$(function() {
  $(window).resize(myResizeFunction).trigger('resize');
});

이렇게 하면 크기 조정 처리기가 창 크기 조정 및 문서 준비 시 트리거됩니다.물론, 원하는 경우 문서 준비 핸들러 외부에 크기 조정 핸들러를 부착할 수 있습니다..trigger('resize')페이지 로드에서 대신 실행할 수 있습니다.

업데이트: 다른 타사 라이브러리를 사용하지 않으려는 경우 다음과 같은 옵션이 있습니다.

이 기술은 대상 요소에 특정 클래스를 추가하므로 CSS만을 통해 스타일링을 제어할 수 있으며 인라인 스타일링을 피할 수 있습니다.

또한 각 크기 조정이 아닌 실제 임계값 포인트가 트리거될 때만 클래스가 추가 또는 제거되도록 합니다.높이가 <= 818에서 > 819로 변경되거나 그 반대로 변경될 때, 각 영역 내에서 여러 번 작동하지 않는 한 임계값 지점에서만 작동합니다.폭의 변화는 상관없습니다.

function myResizeFunction() {
  var $window = $(this),
      height = Math.ceil($window.height()),
      previousHeight = $window.data('previousHeight');

  if (height !== previousHeight) {
    if (height < 819)
      previousHeight >= 819 && $('.footer').removeClass('hgte819');
    else if (!previousHeight || previousHeight < 819)
      $('.footer').addClass('hgte819');

    $window.data('previousHeight', height);
  }
}

$(function() {
  $(window).on('resize.optionalNamespace', myResizeFunction).triggerHandler('resize.optionalNamespace');
});

예를 들어 다음과 같은 CSS 규칙이 있을 수 있습니다.

.footer {
  bottom: auto;
  left: auto;
  position: static;
}

.footer.hgte819 {
  bottom: 3px;
  left: 0;
  position: absolute;
}

사용:

window.onresize = function(event) {
    ...
}

그것도 사용할 수 있습니다.

        function getWindowSize()
            {
                var fontSize = parseInt($("body").css("fontSize"), 10);
                var h = ($(window).height() / fontSize).toFixed(4);
                var w = ($(window).width() / fontSize).toFixed(4);              
                var size = {
                      "height": h
                     ,"width": w
                };
                return size;
            }
        function startResizeObserver()
            {
                //---------------------
                var colFunc = {
                     "f10" : function(){ alert(10); }
                    ,"f50" : function(){ alert(50); }
                    ,"f100" : function(){ alert(100); }
                    ,"f500" : function(){ alert(500); }
                    ,"f1000" : function(){ alert(1000);}
                };
                //---------------------
                $(window).resize(function() {
                    var sz = getWindowSize();
                    if(sz.width > 10){colFunc['f10']();}
                    if(sz.width > 50){colFunc['f50']();}
                    if(sz.width > 100){colFunc['f100']();}
                    if(sz.width > 500){colFunc['f500']();}
                    if(sz.width > 1000){colFunc['f1000']();}
                });
            }
        $(document).ready(function() 
            {
                startResizeObserver();
            });

바인딩할 수 있습니다.resize브라우저 크기가 조정될 때 코드를 실행합니다.또한 다음을 추가해야 합니다.else의 if문장을 사용하면 CSS 값이 새 값을 설정하는 대신 이전 값과 새 값을 전환할 수 있습니다.

언급URL : https://stackoverflow.com/questions/9828831/jquery-on-window-resize