如何检测jquery中的文档大小变化答案

【问题标题】：how to detect document size change in jquery如何检测jquery中的文档大小变化
【发布时间】：2011-07-28 19:05:18
【问题描述】：

因此假设单击某些内容会导致新内容加载到屏幕上，因此文档的高度会发生变化，而以前没有滚动条，现在实际上有滚动条...

我如何使用 jquery 检测到发生的类似情况

将调整大小事件绑定到窗口仅检测窗口调整大小，而将其绑定到文档不起作用

【问题讨论】：

标签： javascript jquery browser resize size

【解决方案1】：

更新：
请不要使用DOMSubtreeModified 事件。它是旧的，已弃用，并且浏览器没有很好的支持。在 99.9% 的情况下，您可以收听不同的事件。您很可能是那些使用 jQuery 并做一些 AJAX 东西的人之一，所以请看看他们的AJAX docs。

These 都是可用的事件。您必须检测到$(document).bind('DOMSubtreeModified', function() { ... }); 并检查与上次触发的尺寸变化。

var height = $(this).height(),
    width  = $(this).width();
$(document).bind('DOMSubtreeModified', function() {
    if($(this).height() != height || $(this).width() != width) {
        recalibrate();
    }
});

每次对 DOM 执行任何操作时都会触发此事件。因此它会减慢您的浏览器速度。

我们应该找到一个更好的选择。您能否向我们提供有关您的方案的更多信息？

【讨论】：

您可以将$(document) 更改为$("body") 或类似的东西。
好吧，基本上，有一个按钮，当用户单击该按钮时，jquery 会触发 load() 函数，该函数使用 ajax 从另一个 url 加载另一个内容并用该内容替换一个空 div...
我也不能在 load() 的回调中添加一些函数，因为当我这样做时，该函数会在整个加载的内容甚至显示在屏幕上之前触发，因此实际上是在大小更改之前发生
然后在加载内容时进行检查。这意味着，您必须在.load() 的回调函数中包含检查。
是的，但是超时将是不可靠的，因为加载所需的时间是可变的，所以如果超时时间不够长，它可能会失败，但如果它太长，它可能最终没用......除了多久才够长

【解决方案2】：

您可以尝试像这样的百分比滚动事件： http://www.jquery4u.com/snippets/jquery-detect-scrolled-page/

您可能需要添加检查以查看是否存在垂直滚动条：

var hasVScroll = document.body.scrollHeight > document.body.clientHeight;

【讨论】：

【解决方案3】：

这是解决方案。

// ajdust margins when page size changes (ie rotate mobile device)
$(window).resize(function() {
  // Do something more useful
  console.log('doc height is ' + $(window).height());
});

【讨论】：