jqueryMobile：如何加载外部Javascripts [英] jqueryMobile: How to load external Javascripts

问题描述

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

I figured this was a common scenario and was surprised not to find an answer here. So here it goes...

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

Some pages within my jquerymobile site are using external javascripts. I don't want these scripts to load on every page on the site. It's mobile and it should load fast.

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

How can I load the external javascript so it is available in the DOM when it needs to be referenced. I found this Stack article which seems to have a good technique: Using Javascript to load other external Javascripts

如果我动态加载这个外部javascript，我应该使用pageinit事件吗？ http://jquerymobile.com/test/docs/api/events.html

If I dynamically load this external javascript, should I use the pageinit event? http://jquerymobile.com/test/docs/api/events.html

如果我使用此事件，那么在页面正文引用它时脚本是否会加载到DOM中？或者我是否会收到对象引用错误？

If I use this event, will the script be loaded in the DOM by the time the page body references it... or will I get an object reference error?

推荐答案

jQuery有你可以使用的 $。getScript（）函数检索外部资产并在全局范围内评估它们。您可以利用此AJAX函数的回调函数在加载资源后继续工作。

jQuery has the $.getScript() function you can use to retrieve external assets and evaluate them in the global scope. You can utilize the callback function for this AJAX function to do work after an asset has loaded.

如果要加载多个资源，可以推送从jQuery返回的XHR对象AJAX对数组起作用，然后等待数组中的所有XHR对象解析。

If you want to load multiple assets you can push the XHR object returned from jQuery AJAX functions to an array, then wait for all of the XHR objects in the array to resolve.

SINGLE

//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
    });
});

MULTIPLE

$(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
    });
});

一些文档：

• $。when（）： http： //api.jquery.com/jquery.when


• $。then（）： http://api.jquery.com/jquery.then


• $。getScript（）： http：//api.jquery。 com / jquery.getScript


• pageInit ： http://jquerymobile.com/demos/1.1.0-rc.2/docs/api/events.html

• $.when(): http://api.jquery.com/jquery.when
• $.then(): http://api.jquery.com/jquery.then
• $.getScript(): http://api.jquery.com/jquery.getScript
• pageInit : http://jquerymobile.com/demos/1.1.0-rc.2/docs/api/events.html

这篇关于jqueryMobile：如何加载外部Javascripts的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！