$（document）.ready（）の呼び出しが遅すぎる

JavaScriptの要素の幅を知る必要があります。問題は、関数があまりに早く起動し、CSSが完全に適用されたときに幅が変化することです。私が理解したように、$（document）.ready（）関数は、ドキュメントが完成したときに起動されましたが、そのようには動作しません。とにかく

が、私は私の問題を理解するであろうコードで（これは単純化した例である）ことを確信している：私は#targetのdiv要素の幅を知りたい

<html> 
<head> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
    <link href='http://fonts.googleapis.com/css?family=Parisienne' rel='stylesheet' type='text/css'> 

    <style type="text/css"> 
     #target { 
      font-family: 'Parisienne', cursive; 
      float: left; 
     } 
    </style> 
</head> 
<body> 
    <div id="target">Element</div> 
</body> 
</html> 

<script type="text/javascript"> 
    $(document).ready(function(){ 
     console.debug($('#target').outerWidth()); 
     alert('hold on'); 
     console.debug($('#target').outerWidth()); 
    }); 
</script>

は、問題があることですアラートの前に実行されるコードは、フォントが完全に読み込まれていないため、デフォルトのフォントでdivを測定しているため、おそらく後の出力とは異なる出力を示します。

私はGoogle Chromeで期待どおり機能しますが、IEとFirefoxでは動作しません。

出典

2012-02-03 Noel De Martin

私はあなたがブラウザの更新ボタンを押したときに、この問題はまだjQueryの2.xの上に存在することを2013年11月24日を確認することができます。この[フィドル]（http://jsfiddle.net/jLDbX/）に行ってください。あなたが最初にフィディドを読み込むと、ほとんどの場合、すべてがうまくいくはずです。また、マウスカーソルをURLに置き、Enterキーを押すと機能します。しかし、あなたがリフレッシュボタンをクリックするか* CTRL + R *を押すと物事は地獄に行きます。 –

私はウィンドウロードが起動したときと、依存フォントが終了したときだけ、幅と高さを測定するために "カウントダウンラッチ"を実装しようとしました。それが役立つかどうかを見てください：[http://jsfiddle.net/jLDbX/1/](http://jsfiddle.net/jLDbX/1/）。このフィドルでは、すべてが正しく動作しているようです。しかし、私の実際の世界のアプリケーションでは、私は間違いを続けていました。あなたのために、それは動作するかもしれません。 –

あなたが（例えば、画像、フォント）はすでにロードされる外部コンテンツに依存している場合、あなたはwindow.loadイベントを使用する必要が

$(window).load(function() { 
    // code here 
});

これらのイベントの動作は、this articleに記載されています。

出典

2012-02-03 20:19:57

2年後、まだ役立ちます！ – statue

JQuery 3.0では、$（window）.load（）は推奨されていないので、 '$（window）.on（ 'load'、function（）{ }）; –

@AlexH、良い点。 '$（window）.load（）'はjQuery 1.8では非推奨です。さらに、jQueryに2つの '.load（）'メソッドがあるため（イベント処理の前に削除されたもの）、混乱します。 – ryanpcmcquen

見積OP：

"私が理解できるように、文書が完了したとき$(document).ready()機能が解雇された、"

$(document).ready()火災時にDOM（「ドキュメントオブジェクトモデル"）が完全にロードされ、操作する準備ができています。 DOMは "ドキュメント"と同じではありません。それは完全に焼成前にロードする（画像やフォントなどのような）すべてのページの資産を待ちます

$(window).load(function() { 
    // your code 
});

あなたが代わりに$(window).load()機能を試すことができます

W3C - DOM Frequently Asked Questions

...。

出典

2012-02-03 20:18:16 Sparky

jQueryの.ready（）関数は、DOMが完了するとすぐに起動します。これは、その時点ですべてのアセット（画像、CSSなど）がロードされているわけではないため、要素のサイズは変更される可能性があります。

要素のサイズが必要な場合は、$（window）.load（）を使用します。

出典

2012-02-03 20:22:18 Jay

$(window).load()を使用できますが、それはすべてのリソース（画像など）を待つことになります。

<script type="text/javascript"> 
    var isFontLoaded = false; 
    var isDocumentReady = false; 
    $("link[href*=fonts.googleapis.com]").load(function() { 
     isFontLoaded = true; 
     if (isDocumentReady) { 
      init(); 
     } 
    }); 
    $(document).ready(function() { 
     isDocumentReady = true; 
     if (isFontLoaded) { 
      init(); 
     } 
    }); 
    function init() { 
     // do something with $('#target').outerWidth() 
    } 
</script>

免責事項：あなたが唯一のフォントがロードされるのを待つしたい場合は、あなたがこのような何かを試みることができる私はこれが動作する完全にわかりません。 <link> onloadイベントは、スタイルシートが解析されるとすぐに、その外部リソースがダウンロードされる前に起動される可能性があります。たぶん、隠しファイル<img src="fontFile.eot" />を追加して、イメージにonloadハンドラを置くことができます。

出典

2012-02-03 20:22:44 gilly3

"ready"イベントは、DOMがロードされたときに起動します。これは、マークアップで安全に作業できることを意味します。

すべてのアセット（css、画像、外部のjavascriptなど）が読み込まれるまで待つには、loadイベントを使用します。

$(window).load(function() { 
    ... 
});

出典

2012-02-03 20:24:26

私は、IE9とIE10で同じ問題を繰り返して見たことがあります。 jquery ready（）呼び出しが発生し、私の< div>のうちの1つが存在しません。私はそれを検出し、その後、短いタイムアウト（）後に再び呼び出す場合、それは正常に動作します。

私のソリューションは、念のために、2倍であった：

は> window.fullyLoaded =真<スクリプトを追加します。文書の末尾に< /スクリプトは>その後、$（ '＃のlastElementInTheDocument'）場合は準備ができて（）コールバック、AND
チェックでその変数を確認してください。長さ> 0

はい、私はこれらが厄介なハッキングだと認識しています。しかし、ready（）が期待どおりに動いていないときは、何らかの回避策が必要です。

"正しい"解決策はおそらくヘッダーに$ .holdReadyを設定し、文書の最後にそれをクリアすることです。もちろん、本当に正しい解決策はready（）が動作することです。

出典

2013-03-27 19:41:02 jeesty

私はこの行動も見ていると思います。おそらく解決策は、ページの下部にdocument.readyコマンドを置くことです。これは、最近のほうが一般的なようです。私はこの問題を見ていますが、私は現在タグにdocument.readyコマンドを持っています。 – hairbo

問題$（ドキュメント）.ready（）を使用すると、不適切なjQueryのonReady機能を宣言したのでが時々発生する可能性があまりにも早く起動します。

問題を抱えている場合、あなたの関数は正確にそうように宣言されていることを確認：あなたは無名関数の一部を忘れた場合

$(document).ready(function() 
{ 
    // put your code here for what you want to do when the page loads. 
});

たとえば、コードはまだ実行されますが、それはアウト」を実行します注文の "。

console.log('1'); 
$(document).ready() 
{ 
    console.log('3'); 
} 
console.log('2');

この意志出力

1 
3 
2

出典

2013-11-02 02:24:38

$（document）.ready（）の呼び出しが遅すぎる

答えて

関連する問題