4

これは一般的なシナリオだと思い、ここで答えが見つからないことに驚いていました。だからここに行く...

私のjquerymobileサイト内のいくつかのページは、外部のjavascriptを使用しています。これらのスクリプトをサイトのすべてのページにロードしたくありません。それはモバイルであり、それは速くロードする必要があります。

参照する必要があるときにDOMで使用できるように、外部JavaScriptをロードするにはどうすればよいですか。私はこのスタックの記事を見つけました。これは良いテクニックのようです。Javascriptを使用して他の外部Javascriptをロードする

この外部JavaScriptを動的にロードする場合、pageinitイベントを使用する必要がありますか？http://jquerymobile.com/test/docs/api/events.html

このイベントを使用すると、ページ本体がスクリプトを参照するまでにスクリプトがDOMに読み込まれますか？それともオブジェクト参照エラーが発生しますか？

4

1 に答える 1

3

jQueryには、$.getScript()外部アセットを取得してグローバルスコープで評価するために使用できる関数があります。このAJAX関数のコールバック関数を利用して、アセットがロードされた後に作業を行うことができます。

複数のアセットをロードする場合は、jQuery AJAX関数から返されたXHRオブジェクトを配列にプッシュしてから、配列内のすべてのXHRオブジェクトが解決されるのを待ちます。

独身

//get remote asset when a specified page is initialized by jQuery Mobile
$(document).delegate('#my-map-page', 'pageinit', function () {
    $.getScript('http://maps.google.com/maps/api/js?sensor=false', function () {
        //the code has now been evaluated and you can utilize it here
    });
});

多数

$(document).delegate('#my-map-page', 'pageinit', function () {

    //setup array for XHR objects and one for the URLs of the assets you want to get
    var jqXHRs  = [],
        scripts = ['http://maps.google.com/maps/api/js?sensor=false', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'];

    //loop through the script URLs and create an AJAX request to get them,
    //also add the XHR object for the request to an array
    for (var i = 0, len = scripts.length; i < len; i++ ) {
        jqXHR.push($.getScript(scripts[i]));
    }

    //use the array of XHR objects we created to wait for all assets to load
    $.when(jqXHR).then(function () {
        //all the scripts have loaded and are evaluated, do work
    });
});

いくつかのドキュメント：

于 2012-04-09T23:37:22.240 に答える