窗口上的jQuery调整大小

Question

我有以下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还希望在调整窗口大小时进行检查？

有任何想法吗？

Answer 1

这是一个使用jQuery,javascript和css来处理resize事件的例子.
(如果你只是在调整大小(媒体查询)上设置样式,那么你最好的选择)
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) { /* ... */ }
});

如何阻止我的调整大小代码经常执行!？

这是绑定到resize时您会注意到的第一个问题.当用户手动调整浏览器大小时,调整大小代码会被称为LOT,并且感觉很漂亮.

要限制你的大小调整代码是如何经常被称为,您可以使用防抖动或油门从方法下划线和lowdash库.

• debounce只会在最后一次调整大小事件后执行调整大小代码X个毫秒.当您只想在用户调整浏览器大小后调用调整大小代码时,这是理想的选择.这对于更新每个单个resize事件可能很昂贵的图形,图表和布局很有用.
• throttle只会每X毫秒执行一次调整大小代码.它"限制"代码被调用的频率.调整大小事件时不常使用它,但值得注意.

如果你没有下划线或lowdash,你可以自己实现一个类似的解决方案: JavaScript/JQuery:$(window).resize如何在调整大小完成后触发？

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

Answer 3

jQuery有一个resize事件处理程序,你可以将它附加到窗口,.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

Answer 4

试试这个解决方案 仅在页面加载后触发,然后在预定义的窗口大小调整期间触发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;
    });
});

Answer 5

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

Answer 6

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

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

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