jQuery调整窗口大小

jQuery调整窗口大小,第1张

jQuery调整窗口大小

这是一个使用jQuery,javascript和css处理调整大小事件的示例。
(如果您只是通过调整大小来设置样式(媒体查询),最好的方法是CSS)
[

CSS
.footer {    }@media screen and (min-height: 820px) {    .footer {        position: absolute;          bottom: 3px;          left: 0px;            }}
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) {  }});
如何停止调整大小的代码执行如此频繁!

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

要限制大小调整代码的调用频率,可以使用下划线和lowdash库中的去抖动或限制方法。

  • debounce
    将仅在LAST调整大小事件后的毫秒数内执行调整大小代码。当用户调整浏览器的大小之后,只想调用一次调整大小的代码时,这是理想的选择。这对于更新图形,图表和布局很有用,因为更新每个调整大小事件可能会很昂贵。
  • throttle
    只会每X毫秒执行一次调整大小的代码。它“限制”了代码的调用频率。这在调整大小事件中并不常用,但是值得注意。

如果没有下划线或破折号,则可以自己实现类似的解决方案: Javascript /
JQuery:$(window).resize调整大小完成后如何触发?



欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/5440402.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-12-11
下一篇 2022-12-11

发表评论

登录后才能评论

评论列表(0条)

保存