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

萬一你有興趣。我能解決這個問題。這與渲染順序無關，並且沒有通過添加Rasmeister建議的超時來解決。 @Rasmeister，我感謝你的幫助！

問題是由於注入了CSS類.flow-items-fill引起的。在這個CSS類中，我要求得到一個#flow-items（或圖像）的高度爲100％。但是，我的父對象沒有高度（height: 0px）... 0px的100％等於0 - >我的圖片消失。爲我的父對象指定高度（#main）時，圖片高度不再設置爲0px。

現在，我有理想的結果！

KR， BarrieO

Answer 2

我懷疑有某種動畫被應用於延緩你的窗口的渲染。您的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);