ウェブサイトの読み込み中にバグが発生する

Question

現在、HTML/CSSとjQuery/Basic JSを使用してウェブページを作成しています。 私は（「表示：なし」で始まる）クラス「コンテンツ」とDIVを持っているウェブサイトは、

$(window).load(function() { 
    $(".loading").fadeOut(700, function() { 
     $(".Content").fadeIn(700); 
    }); 
}); 

をロードしている間にGIF画像を表示するためにjQueryのコードを使用していて、私のWebサイト全体が内側にありますこのタグは、この関数の実行後にすべて表示されます。

問題は、このスクリプトが他のJS/jQueryコードで予期せぬ副作用を引き起こしていることに気づいたことです。 たとえば、このスクリプトhttp://pixelcog.github.io/parallax.js/を使用して、視差効果を作りました。エラーは次のとおりです：使用された画像がまったく表示されない、ブラウザウィンドウのサイズを変更すると画像が突然表示され、すべてがうまくいきます（Google ChromeとFirefoxで同じこと）。読み込みスクリプトをオフにすると、正常に動作します。

第2号：Google Maps APIスクリプト（http://www.w3schools.com/googleapi/google_maps_basic.asp）をテストして、DIVにマップを組み込み、同じ問題に直面しました。私はDIVの間隔も見ることができますが、すべての空白は、ブラウザのサイズを変更（どの方向に関係なく）、それは働き始めます。

私はおそらく間違った方法でこの読み込みを行っていると思われますが、それは私がそれを初めて使用していることです。誰が何が間違っているのか教えてくれますか？

Answer 1

ローディングインジケータを絶対に表示する必要がある場合は、コンテンツをdisplay: noneで非表示にしない方がよいと思います。

むしろCSSと白の要素を持つ例えば、あなたの積載量とそれをオーバーレイしてみてください。

.loading-wrapper { 
    position: fixed; 
    left: 0; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    background: white; 
    z-index: 999; /* depends on your situation */ 
} 

だから、あなたがロードインジケータとページいったんフェードアウトすることを置く要素ですロードされました。他のすべての要素はページ上にあり、幅と高さが設定され、適切に初期化できます。