jQuery 调整窗口大小答案

【问题标题】：jQuery on window resizejQuery 调整窗口大小
【发布时间】：2012-04-07 09:37:26
【问题描述】：

我有以下 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？

有什么想法吗？

【问题讨论】：

$(window).resize(function(){...})

标签： jquery html css

【解决方案1】：

这是一个使用 jQuery、javascript 和 css 处理调整大小事件的示例。
（如果您只是在调整大小（媒体查询）时对事物进行样式化，则最好选择 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 */
    }
}

javascript

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) { /* ... */ }
});

如何阻止我的调整大小代码如此频繁地执行！？

这是您在绑定到调整大小时会注意到的第一个问题。当用户手动调整浏览器大小时，调整大小代码会被调用很多次，并且会感觉很卡。

要限制调用调整大小代码的频率，您可以使用underscore 和lodash 库中的debounce 或throttle 方法。

debounce 只会在最后一次调整大小事件后的 X 毫秒内执行您的调整大小代码。当您只想在用户完成浏览器大小调整后调用一次调整大小代码时，这是理想的选择。它非常适合更新图形、图表和布局，因为更新每个调整大小事件可能会很昂贵。
throttle 只会每 X 毫秒执行一次调整大小的代码。它“限制”了代码被调用的频率。这不常用于调整大小事件，但值得注意。

如果您没有下划线或lodash，您可以自己实现类似的解决方案： JavaScript/JQuery: $(window).resize how to fire AFTER the resize is completed?

【讨论】：

谢谢你的好答案；以及去抖动/油门信息；以及指向自滚动解决方案的链接。

【解决方案2】：

将您的 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'
        });
    }
}

【讨论】：

【解决方案3】：

试试这个解决方案。仅在页面加载后触发，然后在预定义的 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;
    });
});

【讨论】：

它对我有用，谢谢。但是您能解释一下为什么您的“var resizer = function ()”实际上会被解雇吗？在我的理解中，你只是在 $(window).resize 事件中设置了变量 doResize 而不是调用函数本身。
在设置时间间隔后有一个函数调用：resizer();。因为doResize 设置为true，所以当文档准备好时它会被触发。
是的，对我来说，使用 document.ready 执行该函数是可以理解的。但是我不明白为什么在调整大小后也会执行该函数，因为在我的理解中只设置了变量。对我来说，只有在调整大小后再次触发 document.ready 以便再次启动该函数才有意义（但这不应该是这种情况？）。
如果doResize 变量设置为true，则有间隔设置重复检查每个resizeDelay。并且doResize 在$(window).resize() 上也设置为true。因此，您调整窗口大小，将 doResize 设置为 true 并在下一次检查期间调用 resizer() 函数。

【解决方案4】：

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

见：Cross-browser window resize event - JavaScript / jQuery

【讨论】：

...或者您可以将文档就绪处理程序重写为$(function() { $(window).resize(positionFooter).triggerHandler('resize'); });

【解决方案5】：

给你的匿名函数一个名字，然后：

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

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

【讨论】：

【解决方案6】：

function myResizeFunction() {
  ...
}

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

这将导致您的调整大小处理程序在窗口调整大小和文档准备就绪时触发。当然，如果您希望 .trigger('resize') 在页面加载时运行，您可以将调整大小处理程序附加到文档就绪处理程序之外。

更新：如果您不想使用任何其他第三方库，这是另一种选择。

这种技术会为您的目标元素添加一个特定的类，因此您可以仅通过 CSS 控制样式（并避免内联样式）。

它还确保仅在触发实际阈值点而不是每次调整大小时才添加或删除类。它只会在一个阈值点触发：当 height 从 819 或反之亦然，而不是在每个区域内多次。它不关心 width 的任何变化。

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

【讨论】：

【解决方案7】：

使用这个：

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

【讨论】：

【解决方案8】：

也可以用

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

【讨论】：

请解释一下代码的作用。您并没有真正提供太多答案。

【解决方案9】：

您可以使用.resize() 绑定resize 并在调整浏览器大小时运行您的代码。您还需要在 if 语句中添加 else 条件，以便您的 css 值切换新旧，而不仅仅是设置新值。

【讨论】：