0

jQuery の document.ready トリガー関数に問題があります。これが jQuery によるものなのか、ブラウザーの動作によるものなのかはわかりませんが、次のようになります。 document.ready() イベントは、外部スクリプト/css ファイルがロードされる前にトリガーされます。これは、同じドメインにある script/css ファイルには適用されません。同じドメインにある場合、document.ready トリガーはそれらが読み込まれるのを待ちます。

エラーを示すコードのサンプルを次に示します。

<html>
    <head>
        <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    </head>
    <body>
    <script type="text/javascript">
        $(document).ready(function() {
            var html = '<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js" type="text/javascript"><' + '/script>'
                     + '<script type="text/javascript">$(document).ready(function() {alert(typeof jQuery.ui);})</' + 'script>';

            $('body').append(html);
        });
    </script>
    </body>
</html>

「オブジェクト」でアラートを受け取る代わりに、「未定義」でアラートを受け取ります。

ありがとうございます。

編集: 他の誰かが同様の問題を経験し、最初に外部スクリプトをロードしてから HTML/プレーン JS をロードするソリューションを使用しました。リンクはhttp://snipplr.com/view/43449/load-external-scripts-first-for-injected-dom-html-content/です。とにかく、このソリューションには満足できません。コードにいくつかの変更が加えられることを意味し、すべてのブラウザーで 100% 信頼できるかどうかはわかりません。

4

3 に答える 3

2

1.DOMを使用したロード

Niklasが言ったように、あなたのdomはすでに準備ができています。

この方法を適用できます

jQuery.getScript("url",function () { /* on success.. do this */ });

http://api.jquery.com/jQuery.getScript/

http://jsfiddle.net/4crRw/

2.それらを一緒に追加する

http://jsfiddle.net/4crRw/2/

$(document).ready(function ()
{
    var alertWhenDone = function (requiredObjects, callback)
    {
        this.callback = callback;
        this.required = requiredObjects;
        this.addDone = function (label) {
            // remove it from the list
            this.required.splice(this.required.indexOf(label),1);
            if (this.required.length === 0)
            {
                this.callback();
            }
        };
        return this;
    };
    var alertdone = alertWhenDone(['ui','swfloader','font'], function () {
        alert('done');
    });
    jQuery.getScript('http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js',
        function () {
            alertdone.addDone('ui');
        });

    jQuery.getScript('https://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js',
        function () {
            alertdone.addDone('swfloader');
        });

    jQuery.getScript('https://ajax.googleapis.com/ajax/libs/webfont/1.0.19/webfont.js',
        function () {
            alertdone.addDone('font');
        });

});
于 2011-06-06T13:54:00.207 に答える
1

jquery.ready()関数は、DOM 階層が完全に読み込まれるとすぐに開始されます。これは通常、すべての画像がロードされた後に発生します。スクリプト/css ドキュメントが読み込まれるまで待機しない理由は、それらが「リンク」されているためです。つまり、それらは外部から読み込まれ、メイン コードが表示可能なページに変換される間、キャッシュに残ります。

現在持っているスクリプトが$document.ready(function{})外部アセットに依存している場合は、を使用する<body onload="function()">か$document.ready($document.load(asset),function{})、特定のドキュメント/アセットをロードする場合は、関数またはスクリプトを使用します。

関数はDOM が構築されるのを待機し (前述のように)、関数は DOM ではなくページが実際にロードまたはレンダリングを開始するのを待機するため、関数は<body onload="function()">関数とは異なります。この機能は、アセット、ファイル、さらにはコードの断片をページにロードするため、さらに異なります。このメソッドを使用すると、ボディに何も追加する必要がないため、理論的には適切です。.ready().ready()<body onload="function()">.load()

詳細な情報 (およびより完全な説明) は、http://api.jquery.com/ready/およびhttp://api.jquery.com/load/にあります。

これが役立つことを願っています。

于 2011-06-06T14:06:01.093 に答える