Jquery，.height() 在页面刷新时更改但在加载时不更改答案

【问题标题】：Jquery, .height() changing on page refresh but not on loadJquery，.height() 在页面刷新时更改但在加载时不更改
【发布时间】：2011-05-15 01:33:51
【问题描述】：

我已经看过以下话题：

Jquery Loading problem on first load / hard refresh

这似乎是我遇到的问题的逆版本。在这种情况下，硬刷新就是问题所在，在这种情况下就是解决方案。

由于设计复杂的 Web 应用程序 UI 以在不同的显示器高度上工作的一些问题，我决定转向 jQUery 来为我改变高度。我最初使用百分比高度，但这些会导致点处出现较大的差距，并且使用最大和最小高度证明将元素拖出上下文很棘手。如果没有启用 JavaScript（尽管它是建立在渐进增强的基础上的），应用程序的使用会慢得多，因此它假定用户将打开它。这是为那些会提出 CSS 解决方案的人准备的。

~~测试链接~~ 由于域不再有效，该链接已被删除

问题是当页面通过超链接加载时，它的大小正确 - 如果您打开它，您应该会看到这一点，黄色/绿色框的底部和浏览器的底部之间大约有 30 像素。但是刷新它（您可能需要刷新几次），您会看到黄色框从页面底部消失，而绿色框会伸展以加入它。这只会在我的服务器上实时发生 - 在我的本地主机上开发它时我从未注意到这个错误，因为它没有发生。

jquery代码位于sandpit1.1webservices.co.uk/ground-control/examples/scripts/jumpers.js，具体的sn-p是：

function loadResize()
{
 //var window=$(window).height();
 var window=$('div.main').height();
 //window=parseInt(window);
 window-=50;
 $('div.staff ul').css('height',window);
 window-=175;
 $('div.loads').css('height',window);
 window-=150;
 $('div.loads div.list').css('height',window);
}

您可以看到我已经注释了一些内容，并且在实际代码中还有更多用于测试的内容。当窗口高度在测试开始时发出警报时，它在我的浏览器上显示 885（1024px 屏幕高度），但是刷新会给出 1133 到 1785 之间的随机值。执行硬刷新或页面加载，然后返回到 885。调用该函数就在 document.ready 的末尾：

$(window).resize(loadResize);
loadResize();

我曾经让调整大小事件触发本身，但将其删除以防它导致问题。

有什么想法吗？

【问题讨论】：

标签： jquery resize height scaling

【解决方案1】：

我最终通过将loadResize() 函数从$(document).ready() 事件移至$(window).load() 事件来解决此问题。这是正确的，因为在构建 DOM 之后但在下载其他元素之前会触发 document ready。因此，图像和自定义字体（两者都在页面上）等项目会影响大小计算 - 根据网络速度和当时加载的内容，第一个事件会给出不同的高度。

【讨论】：

我遇到了同样的问题。 $(document).ready() 将导致 htmltablecellelement 的高度和宽度值在我将它们输出到 console.log 时在两组值之间随机变化。更改为 $(window).load() 导致值保持不变。谢谢！
我在使用 TypeKit 时遇到了同样的问题。在某些情况下，异步字体加载似乎会稍微改变元素的高度。

【解决方案2】：

试着把它写成 $(function loadresize(){ 并以 }); 结尾

【讨论】：