bootstrap affix navbar不检测图像高度

Question

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

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

我尝试在图像周围放置p标签，明确将图像高度设置为固定高度以及自动，将显示属性设置为每个可设想的值，但无效。我没有在标题中浮动我的图像。当我在标题中添加额外的文本行时，导航将粘贴到该高度（导航栏的偏移高度检测文本的高度，但不检测图像的高度。）

---

*编辑：小提琴工作正常（这是所需的行为）。 http://jsfiddle.net/gwho/8sAYW/ （由于某些原因，这个小提琴并没有表现出有问题的行为）。

JS in coffeescript

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

---

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

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

如果/我应该如何阻止运行javascript代码，以便在加载所有图像后运行？

Answer 1

的解决方案！

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

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

到

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

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

---