javascript - bootstrap 词缀导航栏不检测图像高度

Question

当我附加我的标题元素下方的导航栏元素时，导航栏过早附加，就好像标题中的图像不存在一样。

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

我尝试在图像周围放置 p 标签，将图像高度显式设置为固定高度和自动，将显示属性设置为所有可能的值，但均无济于事。我没有在标题中 float 我的图像。当我在标题中放置额外的文本行时，导航附加到该高度(导航栏附加的偏移高度检测文本的高度，而不是图像的高度)。

---

*编辑: fiddle 工作正常(这是期望的行为)。 http://jsfiddle.net/gwho/8sAYW/ (由于某种原因，这个 fiddle 没有表现出有问题的行为)。

coffeescript中的JS

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

---

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

我认为问题可能是图像是在 Rails 的 Assets 管道中最后加载的(在导航栏部分之前)......并且在渲染图像之前计算了 js 代码中导航栏的偏移位置......而在JS fiddle ，它没有这个问题。

我是否应该/如何推迟运行 javascript 代码，以便它在所有图像加载后运行？

Answer 1

解决方案!

问题是 javascript 在加载图像之前运行(从而导致在图像出现之前计算出的偏移定位)。解决方案是在通过更改我的 CoffeeScript 的最后两行加载其他所有内容后加载 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 或其他服务器上，但它确实有助于确保它不会通过使用后一种代码来代替。

---