なぜ、getComputedStyleは、ページリロード後にスライダーの幅に対して 'auto'を返しますか？

Question

ここにリンク：wbrapist.github.io/slider/index.html

初めてページを読み込むと、getComputedStyleが有効な値を返します。しかし、単にCtrl + F5でページをリロードして、数秒間待ってからF5でリロードすれば、スライダのナビゲーションが中央の位置には表示されません。この時点で、ブラウザのコンソールを開いて、リロード（F5）後にgetComputedStyleが 'auto'値だけを返すことを確認できます。なぜこうなった？なぜ強制的にリロードした後（Ctrl + F5）、大丈夫ですか？

通知することができます：この場合、私のスライダのスライドスライドアニメーションも機能しません。 （そこすぎる）（getComputedStyleを介して値を取得）ここでは、コードのビット

をこのトラブルが

var sliderWidth  = getComputedStyle(document.getElementsByClassName('slider')[0]).width; 
 

 
function setSliderNavPosition() { 
 
    var nav = document.querySelector('.slider .navigation'); 
 
    var navWidth = parseFloat(getComputedStyle(nav).width); 
 
    var slidersWidth = parseFloat(sliderWidth); 
 

 
    nav.style.left = ((slidersWidth/2) - (navWidth/2)) + 'px'; 
 
}

を少なくともChromeとMozillaで存在します。

Answer 1

ドキュメントが完全に読み込まれていない場合は、使用することをお勧めします。それをロードするのにかかる時間に応じて、あなたの価値は異なってくるでしょう。そういうわけで、違う行動を取るのです。

はちょうどこのようなあなたのコードをラップすることにより、文書がロードされるのを待つ、この問題を解決するには、次の

window.addEventListener('load', function(){ 
    /* ...YOUR CODE GOES HERE... */ 
});