javascript - jQuery 函数在调整窗口大小之前不会触发

Question

我有一个 Foundation Orbit 图像 slider ，在您调整浏览器窗口大小之前它不会显示。该空间是空的，直到您仅将窗口大小更改一个像素。 Foundation 正在动态计算 slider 的高度，但是当页面首次加载时，容器上没有设置高度。

我还有一个导航栏，在调整窗口大小之前，它不会自行修正为计算出的宽度。

这是导航条码:

Ew.ApplicationView = Ember.View.extend({
  didInsertElement: function() {
    $(".nav").width($(window).width() - 406);
    $(".subnav").width($(window).width() - 396);
    return $(window).resize(function() {
      $(".nav").width($(window).width() - 406);
      return $(".subnav").width($(window).width() - 396);
    });
  }
});

以及 slider 初始化代码:

Ew.OrbitSliderComponent = Ember.Component.extend({
  initOrbit: function() {
    $(document).foundation('orbit', {
      stack_on_small: true;
      navigation_arrows: false;
      variable_height: true;
    });
  }.on('didInsertElement')
});

什么原因导致 jQuery 函数在窗口调整大小之前不会触发？

Answer 1

一个简单的技巧是将 .resize() 函数链接两次:

return $(window).resize(function() {
    $(".nav").width($(window).width() - 406);
    return $(".subnav").width($(window).width() - 396);
}).resize();    // Resize() onload

您可以看到不使用链接 ( http://jsfiddle.net/teddyrised/2x42Q/2/ ) 和使用链接 ( http://jsfiddle.net/teddyrised/2x42Q/1 ) 之间的区别