Javascript 引导粘贴导航栏未检测到图像高度

当我粘贴标题元素下方的导航栏元素时，导航栏会过早地粘贴，就好像标题中的图像不存在一样

导航条应该在导航条到达顶部时粘贴，而不是更早。我用于此的代码将偏移设置为导航栏的滚动位置，但问题是，此位置的计算方式就像标头中的图像不存在一样

我尝试在图像周围放置p标记，明确地将图像高度设置为固定高度以及自动，将display属性设置为每个可能的值，但没有任何效果。我没有在标题中浮动我的图像。当我在标题中添加额外的文本行时，导航会将该高度附加到导航栏的附加的偏移高度检测文本的高度，而不是图像的高度

*编辑：小提琴工作良好这是理想的行为。 由于某种原因，这把小提琴没有表现出有问题的行为

coffeescript中的JS

ready = ->
$('.affixable').affix({
        offset: { top: $('.affixable').offset().top }
});
$('nav').height($('.affixable').height());
$(document).ready(ready);
$(document).on('page:load', ready);

**编辑：但我的本地主机表现不同，如屏幕截图所示

我认为问题可能在于，在rails的资产管道中，图像在导航栏部分之前最后加载。。。js代码中导航条的偏移位置是在图像渲染之前计算的。。。而在JS小提琴中，它没有这个问题

如果/如何推迟运行javascript代码，使其在加载所有图像后运行？

解决方案

问题是javascript在加载图像之前运行，从而导致在图像出现之前计算的偏移位置。解决方案是在加载所有其他内容后加载javascript，方法是更改我的咖啡脚本的最后两行：

ready = ->
$('.affixable').affix({
        offset: { top: $('.affixable').offset().top }
});
$('nav').height($('.affixable').height());
$(document).ready(ready);
$(document).on('page:load', ready);

到

我不知道这是否会发生在heroku或其他服务器上，但使用后一种代码确实有助于确保不会发生这种情况

---

代码或它没有发生。heroku应用程序的实际链接马上就要出现了。ProTip：对于JavaScript或CSS问题，纯HTML是最好的选择。JS或CSS专家可能有专业知识来帮助您，但他们可能不熟悉HAML或ASP、PHP、JSP等。您不必重构代码。在浏览器中查看源代码就可以了。太棒了！现在把它作为答案贴出来，接受它，而不是把它作为问题的一部分。这样，你就可以帮助其他寻找类似问题的人，而这些问题正是你偶然发现这篇文章的原因。

ready = ->
$('.affixable').affix({
        offset: { top: $('.affixable').offset().top }
});
$('nav').height($('.affixable').height());
$(window).load(ready);
$(window).on('page:load', ready);