クラスを追加するJavascriptは、ウィンドウのサイズを変更した後にのみ機能しますか？

Question

は、私は私のSquarespaceのウェブサイト（https://hethuisvandelingerie.squarespace.com/lingerie/LI001）に奇妙な何かを持っており、それは...狂気私を運転だ

これが私の目標です：http://imgur.com/a/Y5mxN。私はスクロールバーなしのフルスクリーンの製品画像を持つ製品ページを持っていたいと思います。一つだけの製品画像はページ上に存在する場合は、これを達成するために

は、いくつかのJavaScriptが注入されています

：追加されたCSSクラスの場合

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

、私は次のよう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; 
} 

は今、謎が表示されます：ページをロードするときに、製品の画像が消えているようです！ウィンドウを最小化すると、画像が完全に表示されます。次に、私は再びページを最大化する&画像が正しく表示されるようになりました。しかし、私は私のページを更新し、画像が再びなくなって:(。

これは私が解決する時間に&時間を費やしてきたので、私は私を助けるためにあなたのスマートな頭脳を必要とするこれらの問題の一つです！

おかげでたくさんの男&女の子。 あなたが最高だ。私はアニメーションのいくつかの並べ替え。あなたのウィンドウのレンダリングを遅らせることに適用これは、それがテストに失敗する原因完了する前に、あなたのJavaScriptが実行されているがある疑いがある

Answer 1

ご興味のある方は念のために：それは状況を変えるかどうかを確認するために500ミリ秒のタイムアウト遅延。私はこの問題を解決することができました。それはレンダリングのシーケンスには関係せず、Rasmeisterが提案したようにタイムアウトを追加することで解決されませんでした。 @ Las Masister、私はあなたの助けに感謝します！

CSSクラス.flow-items-fillが注入されたために問題が発生しました。このCSSクラスでは、#flow-items（または画像）の高さを100％にするよう頼んだ。しかし、私の親オブジェクトには、高さ（height: 0px）がありませんでした.0％の0％は0 - >私の画像が消えます。親オブジェクトの高さを指定すると（#main）、画像の高さは0pxに設定されなくなりました。

今、私は望みの結果を得ました！

クリプトン、 BarrieO

Answer 2

最小ウィンドウサイズの場合は

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