jQuery的窗口resize
我有以下的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来处理resize事件的例子。
（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的代码执行如此频繁！
这是绑定到resize时您会注意到的第一个问题。 当用户手动调整浏览器的大小时，resize的代码被称为LOT，并且可以感觉相当的j </s>。
要限制调用resize代码的频率，可以使用下划线和低位库的去抖动或调节方法。
-
debounce只会执行您的resize代码在最后resize事件后X毫秒。 当用户完成调整浏览器大小后，只想调用一次resize代码时，这是理想的select。 更新graphics，图表和布局对更新每个resize事件可能会很昂贵。 -
throttle只会每X毫秒执行一次resize的代码。 它“节制”代码被调用的频率。 resize事件不经常使用，但值得注意。
如果你没有下划线或lowdash，你可以自己实现一个类似的解决scheme： JavaScript / JQuery：$（window）.resize如何在resize完成后触发？
将您的JavaScript移入一个函数，然后将该函数绑定到窗口resize。
$(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' }); } }
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 });
请参阅： 跨浏览器窗口resize事件 – JavaScript / jQuery
试试这个解决scheme 只有在页面加载后触发，然后在预定义的resizeDelay窗口resize。
$(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; }); });
也可以使用它
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(); });
用这个：
window.onresize = function(event) { ... }
您可以使用.resize()绑定resize并在浏览器resize时运行代码。 你还需要添加一个else条件到你的if语句，以便你的css值切换旧的和新的，而不仅仅是设置新的。
function myResizeFunction() { ... } $(function() { $(window).resize(myResizeFunction).trigger('resize'); });
这将导致您的resize处理程序触发窗口大小调整和文档准备就绪。 当然，如果你想让.trigger('resize')在页面加载上运行，你可以在你的文档就绪处理程序之外附加你的resize处理程序。
更新 ：如果您不想使用任何其他第三方库，这是另一个选项。
这个技巧为你的目标元素添加了一个特定的类，所以你只能通过CSS来控制样式（避免内联样式）。
它还确保只在触发实际阈值点时添加或删除类，而不是每个resize。 它只会在一个阈值点发射：当高度从<= 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; }
