Jquery,.height()更改页面刷新但不加载

Question

我已经看过以下主题:

第一次加载/硬刷新时​​出现Jquery加载问题

这似乎是我正在经历的问题的一些逆版本.在这种情况下,硬刷新是问题,在这种情况下它是解决方案.

由于设计复杂的Web应用程序UI以处理不同的显示器高度的一些问题,我决定转向jQUery来改变我的高度.我最初使用的是百分比高度,但是这些导致了点处的大间隙,并且使用最大和最小高度被证明很难将元素拖出上下文.如果没有启用JavaScript,应用程序的使用会慢得多(尽管它是基于渐进增强功能),因此假定用户将其打开.那是那些建议CSS解决方案的人.

链接到测试 由于域不再有效,因此已删除

问题是,当页面通过超链接加载时,它的大小正确 - 如果你打开它,你应该看到这个,黄色/绿色框底部和浏览器底部之间大约30px.然而刷新它(您可能需要刷新几次)并且您将看到黄色框从页面底部消失,绿色框拉伸以加入它.这只发生在我的服务器上 - 我在本地主机上开发它时从未注意到这个错误,因为它不会发生.

jquery代码位于sandpit1.1webservices.co.uk/ground-control/examples/scripts/jumpers.js中,特定代码段为:

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();

我曾经有过resize事件触发器本身但是在它导致问题的情况下将其删除.

有任何想法吗？

Answer 1

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