19

私の (かなり複雑な) JavaScript/jQuery アプリケーションを Google の Chrome ブラウザで実行すると$(document).ready、一部の JavaScript ファイルがまだロードされていない間に起動するように見えます。

関連するコード (簡略化):

私のHTMLファイルで

<script>var httpRoot='../../../';var verifyLoad = {};</script>

<script src="../../../globalvars.js"></script>
<script src="../../../storagekeys.js"></script>
<script src="../../../geometry.js"></script>
<script src="../../../md5.js"></script>
<script src="../../../serialize.js"></script>
...
<script src="../../../main.js"></script>

main.js を除く各 .js ファイルの最後のステートメントとして:

verifyLoad.FOO = true; // where FOO is a property specific to the file

例えば

verifyLoad.jquerySupplements = true; 

verifyLoad.serialize = true;

main.js で:

$(document).ready(function() {
    function verifyLoadTest (scriptFileName, token) {
        if (!verifyLoad.hasOwnProperty(token)) {
            console.log(scriptFileName + ' not properly loaded'); 
        };
    };
    verifyLoadTest('globalvars.js', 'globalvars');
    verifyLoadTest('storagekeys.js', 'storagekeys');
    verifyLoadTest('geometry.js', 'geometry');
    verifyLoadTest('md5.js', 'geometry');
    verifyLoadTest('serialize.js', 'serialize');
    ...
}

驚いたことに、これらのトリガーのいくつかが見られます。これは の私の理解と一致しません$(document).ready。私は何が欠けていますか？

4

1 に答える 1

18

ドキュメントの ready イベントは、ブラウザーが HTML ファイルを最初から最後まで解析し、DOM 構造に変換したときに発生します。他のリソース (スタイルシート、画像、この場合はスクリプトなど) が読み込まれることを保証するものではありません。DOM 構造のみを参照し、ページのリソースの読み込みステータスに関係なく起動されます。

リソースが読み込まれるのを待ちたい場合は、windowのloadイベントを使用します。このイベントは、ページ上のすべての要素の読み込みが完了したときにのみ発生します。

見る：

于 2011-07-05T19:40:47.337 に答える