按需加载JavaScript

时间:2011-05-24 15:17:25

标签: javascript load

我正在使用jQuery和jQuery mobile。

我认为这两个库都是通过ATT的互联网下载到我的iPhone上的,这很慢。

所以我想知道是否有一些框架会处理它并将文件修剪为我在页面中使用的函数所需的大小?

CSS文件还有什么东西可以胖吗?

由于

4 个答案:

答案 0 :(得分:2)

将此插入您的javascript:

var LoadedScripts = new Array();

jQuery.getScript = function(url, callback, cache){
  if ($.inArray(url, LoadedScripts) > -1) {
    callback();
  }
  else {
     LoadedScripts.push(url);       
     jQuery.ajax({
      type: "GET",
      url: url,
      success: callback,
      dataType: "script",
      cache: cache
    });
  }
};

如何使用

function YourFunction() {
   jQuery.getScript('path/to/your/script.js',function(){  
     // your code here - the script has loaded
   },true);
}

更改“true”以关闭缓存并强制重新加载文件(对css很有用)

function YourFunction() {
   jQuery.getScript('path/to/your/script.js',function(){  
     // your code here - the script has loaded
   },false);
} 

答案 1 :(得分:1)

YUI Compressor可用于缩小JS和CSS文件,如果您正在下载某些elses库/代码,它们通常会提供缩小版本,这样您就不会再尝试将其缩小。如果你想“减少”以排除你没有使用的库的部分,你可能想要首先重新考虑使用库而不只是为你需要的部分创建自己的解决方案......但是你可能会惊讶于你试图排除的部分是多么有用。

答案 2 :(得分:0)

如果您使用getScript()minified jquery文件,可以使用jquery moblie按需加载其他脚本吗?

答案 3 :(得分:0)

<pre><code>
  function require (src, callback) {
    if (!(src != null && (typeof src == 'string' || typeof src == 'object'))) return;
    var src = typeof src == 'string' ? [src] : src;
    var total = [];
    var loaded = [];
    var failed = [];
    var fn = function (e) {
      if (e.type == 'load') loaded.push(e.target.src);
      else failed.push(e.target.src);
      if ((loaded.length + failed.length) == total.length && typeof callback == 'function') callback(!!failed.length, loaded, failed);
    };
    var load = function (src) {
      var s = document.createElement('script');
      s.type = 'application/javascript';
      s.src = src;
      s.addEventListener('error', fn, false);
      s.addEventListener('load', fn, false);
      document.getElementsByTagName('head')[0].appendChild(s);
      return s.src;
    };
    for (var i in src) {
      var s = src[i].split(/[\s,]+/);
      for (var j in s) if (total.indexOf(s[j]) < 0) total.push(load(s[j]));
    }
  }

// Usage example:
require ('script1.js, script2.js, ...', function (hasError, loaded, failed) {
  console.log(arguments);
});

</code></pre>