僅在調整窗口大小后才能添加類的Javascript嗎？

Question

我在Squarespace網站（ https://hethuisvandelingerie.squarespace.com/lingerie/LI001 ）上發現了一些奇怪的東西，這讓我很瘋狂。

這是我的目標： http : //imgur.com/a/Y5mxN 。 我想要一個具有全屏產品圖片而不帶滾動條的產品頁面。

為了實現這一點，如果頁面上僅顯示一個產品圖片，則會注入一些JavaScript：

if (Y.one('.collection-type-products') 
&& Y.one('.product-item-single-image-fill'))) 
&& Y.all('.flow-item').size() === 1) {
    if (Y.config.win.innerWidth > 640) {
        Y.one('body').addClass('flow-items-fill');
        Y.one('.flow-item').addClass('content-fill');
    } else {
        Y.one('body').removeClass('flow-items-fill');
        Y.one('.flow-item').removeClass('content-fill');
        Y.one('.flow-item img').setAttribute('style','');
    }
}

對於添加的CSS類，我發現以下LESS代碼：

@media screen and ( min-width: 641px ){
    .flow-items-fill{
        height:100%;
        #canvas{
            height:100%;
        }
        #main{
            height:100%;
            >.wrapper{
                height:100%;
            }
        }
        #flowItems{
            height:100%;
        }
        .flow-item{
            height:100%;
        }
    }
    .flow-item{
        .content-fill{
            height: 100%;
        }
    }

並且：

// Responsive Images
img{
    // max-width:100%;
}
// But not for imageLoader stuff
.content-fill > img,
.content-fit > img{
    max-width:none;
}

現在，出現了一個謎：加載頁面時，產品圖片似乎消失了！ 最小化窗口時，圖片看起來完美。 接下來，我再次最大化頁面，圖片現在可以正確顯示。 但是，我刷新頁面，圖片再次消失了:(。

這是我花費了數小時來解決的問題之一，因此，我需要您的聰明才智來幫助我！

非常感謝男孩和女孩。 你是最好的。

Answer 1

我懷疑正在應用某種動畫，從而延遲了窗口的渲染。 您的JavaScript在此操作完成之前就運行了，導致它無法通過最小窗口尺寸的測試。

嘗試設置500毫秒的超時延遲，以查看情況是否有所改變：

setTimeout(function() {
  if (Y.one('.collection-type-products') 
  && Y.one('.product-item-single-image-fill'))) 
  && Y.all('.flow-item').size() === 1) {
      if (Y.config.win.innerWidth > 640) {
          Y.one('body').addClass('flow-items-fill');
          Y.one('.flow-item').addClass('content-fill');
      } else {
          Y.one('body').removeClass('flow-items-fill');
          Y.one('.flow-item').removeClass('content-fill');
          Y.one('.flow-item img').setAttribute('style','');
      }
  }
}, 500);

Answer 2

以防萬一您有興趣。 我能夠解決問題。 它與渲染順序無關，也無法通過Rasmeister建議的添加超時來解決。 @Rasmeister，感謝您的幫助！

造成此問題的原因是，注入了CSS類.flow-items-fill 。 在此CSS類中，我要求將#flow-items （或圖片）高度設置為100％。 但是，我的父對象沒有高度（ height: 0px ）... height: 0px 100％等於0->我的圖片消失了。 在為我的父對象（ #main ）指定高度時，圖片高度不再設置為0px。

現在，我有了理想的結果！

Kr，BarrieO