Question

我有一个Foundation Orbit图像滑块，在调整浏览器窗口大小之前不会显示。在你甚至只用一个像素改变窗口大小之前，空间是空的。基金会正在计算滑块的高度，但是当页面首次加载时，容器上没有高度设置。

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

这是导航条码：

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

滑块初始化代码：

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）之间的区别

Answer 2

我不完全理解为什么会发生这种情况，但它似乎与.nav和.subnav的尺寸有关吗？我认为这些元素的初始尺寸发生得太早。 Plz尝试以下方法：

Ew.ApplicationView = Ember.View.extend({
  didInsertElement: function() {
    Ember.run.scheduleOnce('afterRender', this, 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);
      });
    }

  }
});

这使得您的逻辑在Ember执行完所有渲染之后运行。实际上，didInsertElement只保证在给定视图的根元素存在时执行。子元素或子视图不必存在！查看我的blog以获得解释和更优雅的方法，以避免在代码中出现这种缺乏吸引力的嵌套。

Answer 3

可能是那些说的部分：

   return $(window).resize(function() {

如果不是$（window）.resize，那么它是$（document）.load？

来自jQuery文档：

/*The load event is sent to an element when it and all sub-elements have been 
completely  loaded. This event can be sent to any element associated with a 
URL: images, scripts, frames, iframes, and the window object.*/

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

3 个答案: