javascript - JQueryがロード時にページを台無しにする

Question

この問題を定義する方法がよくわかりません。jQuery と Javascript を使い始めたばかりで、ページが最初に読み込まれるときを除いて、ほとんどすべて問題ありません。ページをフェードインさせましたが、jQuery が読み込まれるまですべての CSS が適用されていないようです。

このスクリプトを Head タグで試しましたが、うまくいきません。ヘルプ？

<script type="text/javascript">
    $(function(){
       $('#box-container').hide();
    });
    $(window).load(function() {
       $("#box-container").show();
    });
</script>

おっと: サイト: http://www.elijahish.com

score 5 · Accepted Answer

コードをデバッグするには、Chrome コンソールや Firefox Firebug などの Javascript コンソールを使用する必要があります。

まず、scriptjQuery を定義する前に jQuery を必要とするブロックを配置します。

<head>
<script type="text/javascript">
$(function(){
    $('#box-container').hide();
});
$(window).load(function() {
    $("#box-container").show();
});
</script>

...

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

...

したがって、次のように表示されます (Chrome コンソールで)。

ReferenceError: $ is not defined
    $(function(){

#box-container次に、要素 ( ) が DOM 自体に表示される前に(最初のブロックで) 要素 ( ) にアクセスするスクリプトを実行しようとしているようです。jQuery.readyその最初のブロックで使用できますが、面倒になる可能性があります。<div id="box-container">代わりに、が定義された直後にこれを配置することをお勧めします。

<body ...>

<div id="box-container" ...>
...
</div>
<script type="text/javascript">
(function($){
    $('#box-container').hide();
    $(window).load(function() {
        $("#box-container").show();
    });
})(jQuery);
</script>

デモ: http://jsfiddle.net/5JpVB/4 (setTimeout劇的な効果のために a を使用します。)

<div ...>または、を開いた直後に配置します。

<div id="box-container">
<script type="text/javascript">
(function($){
    $('#box-container').hide();
    $(window).load(function() {
        setTimeout(function(){
            $("#box-container").show();
        }, 2000);
    });
})(jQuery);
</script>
Box Container shown on window.onload.
</div>

http://jsfiddle.net/5JpVB/5/

そしてとどめの一撃(document.writeにもかかわらず):

<head>
...
<script>
document.write('<style>#box-container{display: none;}</style>');
</script>
...
</head>

http://jsfiddle.net/5JpVB/2/

はい、これはヘッダーにスタイルを「配置」するスクリプトでdisplay: noneあり、これまでに投げかけられてきた推測の一部を「きちんと」バイパスします (方法ごとに多かれ少なかれ欠点があります)。このメソッドには優雅さがあります (もちろん、厄介なの使用を除いてdocument.write)。

さらに別の方法として、CSSdisplay: noneメソッドを使用します。

<head>
...
<style>
#box-container {
    display: none;
}
</style>
...

<div id="box-container">
    <noscript><style>#box-container{display: block;}</style></noscript>
    Box Container shown on window.onload.
</div>

http://jsfiddle.net/5JpVB/3/ (結果ページのみ、Javascript を無効にして動作を確認してください。)

score 1 · Accepted Answer

あなたは FOUC のケースを取得しています: http://www.bluerobot.com/web/css/fouc.asp/

そして、何年も経った今でも私たちは悩まされています！http://paulirish.com/2009/avoiding-the-fouc-v3/

このリンクには、さまざまなソリューションが含まれています。

コンテンツを表示する JavaScript を実行する前に、コンテンツのスタイルを非表示に設定することもできます。Jared は、これを行うための優れた方法を示しています。

score 0 · Accepted Answer

CSS と JavaScript のどちらか一方を使用するのではなく、組み合わせて使用することをお勧めします。私が構築しているサイトで jQueryUI を使用して同じ問題が発生し、これらのソリューションの多くが JavaScript を使用していないユーザーには連絡先を利用できないことがわかりました。

だからここに私がしたことがあります：

CSS:

.flash #wrapper {
     display: none;
}

<div id="wrapper">これが行うことは、クラスフラッシュの子孫である場合にのみ、を非表示に設定することです。そのため、javascript を使用しないユーザーから隠されないようにするために、<html>要素にクラス flash を追加します。そのため、エンドユーザーが JavaScript を有効にしている場合にのみ物理的に非表示にすることができます。それ以外の場合は、スタイル化されていないコンテンツを介して少なくともアクセスできます。

JavaScript:

$('html').addClass('flash');
$(doctument).ready(function() {
     /* Do all your stuff */

     /* When done show the wrapper with the content stylized */
     $(#wrapper).show();
});

ページの読み込み時間によっては、少しフラッシュが発生する場合がありますが、スタイル化されていないコンテンツのフラッシュにはなりません。私の場合、<ul>最初に通常の要素をフラッシュしてから menuUI アイテムをフラッシュする jQueryUI メニュー項目があり、各列の高さが等しく<div>なるように要素のサイズが jQuery で変更されますが、最初に異なる高さがフラッシュされます。<div>これにより、スクリプトが有効になっていないブラウザーにアクセスできるようにしながら、問題が修正されました。

javascript - JQueryがロード時にページを台無しにする

3 に答える 3

Related

Reference