4

我认为这是一种常见的情况，很惊讶在这里没有找到答案。所以这里...

我的 jquerymobile 网站中的某些页面正在使用外部 javascript。我不希望这些脚本加载到网站的每个页面上。它是移动的，加载速度应该很快。

如何加载外部 javascript，以便在需要引用时在 DOM 中可用。我发现这篇 Stack 文章似乎有一个很好的技术：Using Javascript to load other external Javascripts

如果我动态加载这个外部 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 回答