可以推迟加载jQuery吗？ [英] Possible to defer loading of jQuery?

问题描述

让我们面对现实吧，jQuery / jQuery-ui下载量很大。

Let's face it, jQuery/jQuery-ui is a heavy download.

Google推荐延迟加载JavaScript 以加速初始渲染。我的页面使用jQuery来设置一些位于页面下方的选项卡（主要是在初始视图之外），我想将jQuery推迟到页面呈现之后。

Google recommends deferred loading of JavaScript to speed up initial rendering. My page uses jQuery to set up some tabs which are placed low on the page (mostly out of initial view) and I'd like to defer jQuery until AFTER the page has rendered.

Google的延迟代码在页面加载后通过挂钩到正文onLoad事件为DOM添加标记：

Google's deferral code adds a tag to the DOM after the page loads by hooking into the body onLoad event:

<script type="text/javascript">

 // Add a script element as a child of the body
 function downloadJSAtOnload() {
 var element = document.createElement("script");
 element.src = "deferredfunctions.js";
 document.body.appendChild(element);
 }

 // Check for browser support of event handling capability
 if (window.addEventListener)
 window.addEventListener("load", downloadJSAtOnload, false);
 else if (window.attachEvent)
 window.attachEvent("onload", downloadJSAtOnload);
 else window.onload = downloadJSAtOnload;

</script>

我想以这种方式推迟加载jQuery，但是当我尝试它时我的jQuery代码失败了找到jQuery（我不是完全出乎意料）：

I'd like to defer loading of jQuery this way, but when I tried it my jQuery code failed to find jQuery (not completely unexpected on my part):

$(document).ready(function() {
    $("#tabs").tabs();
});

因此，似乎我需要找到一种方法来推迟执行jQuery代码，直到加载jQuery 。如何检测添加的标签是否已完成加载和解析？

So, it seems I need to find a way to defer execution of my jQuery code until jQuery is loaded. How do I detect that the added tag has finished loading and parsing?

作为推论，似乎异步加载也可能包含答案。

As a corollary, it appears that asynchronous loading may also contain an answer.

任何想法？

推荐答案

试试这个，这是我之前从jQuerify bookmarklet编辑的。我经常使用它来加载jQuery并在加载后执行它们。你当然可以用你自己的url替换那里的url到你的自定义jquery。

Try this, which is something I edited a while ago from the jQuerify bookmarklet. I use it frequently to load jQuery and execute stuff after it's loaded. You can of course replace the url there with your own url to your customized jquery.

(function() {
      function getScript(url,success){
        var script=document.createElement('script');
        script.src=url;
        var head=document.getElementsByTagName('head')[0],
            done=false;
        script.onload=script.onreadystatechange = function(){
          if ( !done && (!this.readyState || this.readyState == 'loaded' || this.readyState == 'complete') ) {
            done=true;
            success();
            script.onload = script.onreadystatechange = null;
            head.removeChild(script);
          }
        };
        head.appendChild(script);
      }
        getScript('http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js',function(){
            // YOUR CODE GOES HERE AND IS EXECUTED AFTER JQUERY LOADS
        });
    })();

我真的会将jQuery和jQuery-UI合并到一个文件中并使用url。如果您真的想单独加载它们，只需链接getScripts：

I would really combine jQuery and jQuery-UI into one file and use a url to it. If you REALLY wanted to load them separately, just chain the getScripts:

getScript('http://myurltojquery.js',function(){
        getScript('http://myurltojqueryUI.js',function(){
              //your tab code here
        })
});

这篇关于可以推迟加载jQuery吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！