blocks|key|696291|text|将jQuery和依赖于jQuery的代码放在文件的末尾。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|696292|编辑:更清晰一点|696293|<html>
<head></head>
<body>
++++
++++<script+type="text/javascript"+src="http://path/to/jquery/jquery.min.js"></script>
++++<script>//Put+your+jQuery+code+here</script>
</body>
</html>|code-block|syntax|javascript|696294|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>Put jQuery and your jQuery dependent code at the end of your HTML file.</p>

<p>Edit:  A little more clear</p>

<pre><code>&lt;html&gt;
&lt;head&gt;&lt;/head&gt;
&lt;body&gt;
    &lt;!-- Your normal content here --&gt;
    &lt;script type="text/javascript" src="http://path/to/jquery/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script&gt;//Put your jQuery code here&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>


blocks|key|696309|text|以下代码应在窗口加载完成后加载您的脚本：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|696310|<html>
<head>
++++<script>
++++var+jQueryLoaded+=+false;
++++function+test()+{
++++++++var+myScript+=+document.createElement('script');
++++++++myScript.type+=+'text/javascript';
++++++++myScript.async+=+true;
++++++++myScript.src+=+jQueryLoaded+?+'http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js'+:+'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js';
++++++++document.body.appendChild(myScript);

++++++++if(!jQueryLoaded){
++++++++++++alert('jquery+was+loaded');
++++++++++++jQueryLoaded+=+true;
++++++++++++test();
++++++++}+else+{
++++++++++++alert('jqueryui+was+loaded');+++
++++++++}
++++}

++++if+(window.addEventListener){
++++++++alert('window.addEventListener');
++++++++window.addEventListener("load",+test,+false);
++++}+else+if+(window.attachEvent){
++++++++alert('window.attachEvent');
++++++++window.attachEvent("onload",+test);
++++}+else{
++++++++alert('window.onload');
++++++++window.onload+=+test;
++++}
++++</script>
</head>
<body>
<p>Placeholder+text+goes+here</p>
</body>
</html>|code-block|syntax|javascript|696311|适用于我的Chrome，FF和IE9+-如果有帮助，请告诉我|696312|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>The following code should load your scripts after the window is finished loading:</p>

<pre><code>&lt;html&gt;
&lt;head&gt;
    &lt;script&gt;
    var jQueryLoaded = false;
    function test() {
        var myScript = document.createElement('script');
        myScript.type = 'text/javascript';
        myScript.async = true;
        myScript.src = jQueryLoaded ? 'http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js' : 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js';
        document.body.appendChild(myScript);

        if(!jQueryLoaded){
            alert('jquery was loaded');
            jQueryLoaded = true;
            test();
        } else {
            alert('jqueryui was loaded');   
        }
    }

    if (window.addEventListener){
        alert('window.addEventListener');
        window.addEventListener("load", test, false);
    } else if (window.attachEvent){
        alert('window.attachEvent');
        window.attachEvent("onload", test);
    } else{
        alert('window.onload');
        window.onload = test;
    }
    &lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;p&gt;Placeholder text goes here&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>Worked for me in Chrome, FF and IE9 - let me know if that helps</p>


blocks|key|912492|text|在我看来，您所要做的就是a)将您希望在加载时运行的jQuery代码添加到jQuery文件的末尾，或者b)将其添加到downloadJSAtOnload函数中，如下所示：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|912493|<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);
+$("#tabs").tabs();+//+<====+NOTE+THIS.+This+should+theoretically+run+after+the
++++++++++++++++++++//+script+has+been+appended,+though+you'll+have+to+test+this
++++++++++++++++++++//+because+I+don't+know+if+the+JavaScript+above+will+wait+for
++++++++++++++++++++//+the+script+to+load+before+continuing
+}

+//+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>|code-block|syntax|javascript|912494|entityMap^0|1L|I|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

<p>Well it seems to me, all you have to do is either a) add the jQuery code you want to run on load, to the end of the jQuery file or b) append it to the <code>downloadJSAtOnload</code> function like so:</p>

<pre><code>&lt;script type="text/javascript"&gt;

 // 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);
 $("#tabs").tabs(); // &lt;==== NOTE THIS. This should theoretically run after the
                    // script has been appended, though you'll have to test this
                    // because I don't know if the JavaScript above will wait for
                    // the script to load before continuing
 }

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

&lt;/script&gt;
</code></pre>


blocks|key|696407|text|看起来您只需要<script+defer>：http://www.w3schools.com/tags/att_script_defer.asp|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|696408|entityMap|0|LINK|mutability|MUTABLE|url|http://www.w3schools.com/tags/att_script_defer.asp^0|7|E|M|1E|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@$9|O|A|P|B|C]]|D|@$9|Q|A|R|1|S]]|E|$]]|$1|F|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|G|$H|$5|I|J|K|E|$L|M]]]]

<p>Appears that you just need <code>&lt;script defer&gt;</code> : <a href="http://www.w3schools.com/tags/att_script_defer.asp" rel="nofollow">http://www.w3schools.com/tags/att_script_defer.asp</a> </p>


blocks|key|696410|text|element.addEventListener("load",+function+()+{
++++$('#tabs').tabs()
},+false);|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|696411|试试看。|unstyled|696412|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|J|8|@]|9|@]|A|$]]|$1|G|3|-4|5|F|7|K|8|@]|9|@]|A|$]]]|H|$]]

<pre><code>element.addEventListener("load", function () {
    $('#tabs').tabs()
}, false);
</code></pre>

<p>Try that.</p>


blocks|key|912600|text|试试这个，这是我不久前从jQuerify书签小程序编辑的内容。我经常使用它来加载jQuery，并在加载之后执行一些东西。当然，您也可以将那里的url替换为您自己的自定义jquery的url。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|912601|(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+%7C%7C+this.readyState+==+'loaded'+%7C%7C+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
++++++++});
++++})();|code-block|syntax|javascript|912602|我真的会将jQuery和jQuery-UI合并到一个文件中，并使用指向它的url。如果你真的想单独加载它们，只需链接getScripts：|912603|getScript('http://myurltojquery.js',function(){
++++++++getScript('http://myurltojqueryUI.js',function(){
++++++++++++++//your+tab+code+here
++++++++})
});|912604|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>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. </p>

<pre><code>(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 &amp;&amp; (!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
        });
    })();
</code></pre>

<p>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:</p>

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


blocks|key|912643|text|看一看jQuery.holdReady()|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|912644|“保留或释放jQuery的ready事件的执行。”(jQuery+1.6%2B)|912645|http://api.jquery.com/jQuery.holdReady/|912646|entityMap|0|LINK|mutability|MUTABLE|url^0|3|I|0|0|0|13|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|T|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|U|8|@]|D|@$9|V|A|W|1|X]]|E|$]]|$1|J|3|-4|5|6|7|Y|8|@]|D|@]|E|$]]]|K|$L|$5|M|N|O|E|$P|I]]]]

<p>Take a look <code>jQuery.holdReady()</code></p>

<p>"Holds or releases the execution of jQuery's ready event." (jQuery 1.6+)</p>

<p><a href="http://api.jquery.com/jQuery.holdReady/" rel="nofollow">http://api.jquery.com/jQuery.holdReady/</a></p>


blocks|key|912689|text|由于这是一个重要主题的排名最高的问题，让我大胆地根据@valmarv和@amparsand之前的回答提供我自己的看法。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|912690|我使用多维数组来加载脚本。将它们之间没有依赖关系的那些分组在一起：|912691|var+dfLoadStatus+=+0;
var+dfLoadFiles+=+[
++++++["http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"],
++++++["http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js",
+++++++"/js/somespecial.js",
+++++++"/js/feedback-widget.js#2312195",
+++++++"/js/nohover.js"]
+++++];

function+downloadJSAtOnload()+{
++++if+(!dfLoadFiles.length)+return;

++++var+dfGroup+=+dfLoadFiles.shift();
++++dfLoadStatus+=+0;

++++for(var+i+=+0;+i<dfGroup.length;+i%2B%2B)+{
++++++++dfLoadStatus%2B%2B;
++++++++var+element+=+document.createElement('script');
++++++++element.src+=+dfGroup[i];
++++++++element.onload+=+element.onreadystatechange+=+function()+{
++++++++if+(+!+this.readyState+%7C%7C+
+++++++++++++++this.readyState+==+'complete')+{
++++++++++++dfLoadStatus--;
++++++++++++if+(dfLoadStatus==0)+downloadJSAtOnload();
++++++++}
++++};
++++document.body.appendChild(element);
++}

}

if+(window.addEventListener)
++++window.addEventListener("load",+downloadJSAtOnload,+false);
else+if+(window.attachEvent)
++++window.attachEvent("onload",+downloadJSAtOnload);
else+window.onload+=+downloadJSAtOnload;|code-block|syntax|javascript|912692|它首先加载jquery，加载后立即继续加载其他脚本。您可以通过添加到页面上任意位置的数组来轻松添加脚本：|912693|dfLoadFiles.push(["/js/loadbeforeA.js"]);
dfLoadFiles.push(["/js/javascriptA.js",+"/js/javascriptB.js"]);
dfLoadFiles.push(["/js/loadafterB.js"]);|912694|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>As this is a top ranking question on a important subject let me be so bold to provide my own take on this based on a previous answer from @valmarv and @amparsand.</p>

<p>I'm using a multi-dimensional array to load the scripts. Grouping together those that have no dependencies between them:</p>

<pre><code>var dfLoadStatus = 0;
var dfLoadFiles = [
      ["http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"],
      ["http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js",
       "/js/somespecial.js",
       "/js/feedback-widget.js#2312195",
       "/js/nohover.js"]
     ];

function downloadJSAtOnload() {
    if (!dfLoadFiles.length) return;

    var dfGroup = dfLoadFiles.shift();
    dfLoadStatus = 0;

    for(var i = 0; i&lt;dfGroup.length; i++) {
        dfLoadStatus++;
        var element = document.createElement('script');
        element.src = dfGroup[i];
        element.onload = element.onreadystatechange = function() {
        if ( ! this.readyState || 
               this.readyState == 'complete') {
            dfLoadStatus--;
            if (dfLoadStatus==0) downloadJSAtOnload();
        }
    };
    document.body.appendChild(element);
  }

}

if (window.addEventListener)
    window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
    window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</code></pre>

<p>It loads first jquery after it is loaded it continue to load the other scripts at once. You can add scripts easy by adding to the array anywhere on your page:</p>

<pre><code>dfLoadFiles.push(["/js/loadbeforeA.js"]);
dfLoadFiles.push(["/js/javascriptA.js", "/js/javascriptB.js"]);
dfLoadFiles.push(["/js/loadafterB.js"]);
</code></pre>


blocks|key|912711|text|<!doctype+html>
<html>
++++<head>

++++</head>
++++<body>
++++++++<p>If+you+click+on+the+"Hide"+button,+I+will+disappear.</p>
++++++++<button+id="hide"+>Hide</button>
++++++++<button+id="show"+>Show</button>

++++++++<script+type="text/javascript">
++++++++++++function+loadScript(url,+callback)+{

++++++++++++++++var+script+=+document.createElement("script")
++++++++++++++++script.type+=+"text/javascript";

++++++++++++++++if+(script.readyState)+{++//IE
++++++++++++++++++++script.onreadystatechange+=+function()+{
++++++++++++++++++++++++if+(script.readyState+==+"loaded"+%7C%7C
++++++++++++++++++++++++++++++++script.readyState+==+"complete")+{
++++++++++++++++++++++++++++script.onreadystatechange+=+null;
++++++++++++++++++++++++++++callback();
++++++++++++++++++++++++}
++++++++++++++++++++};
++++++++++++++++}+else+{++//Others
++++++++++++++++++++script.onload+=+function()+{
++++++++++++++++++++++++callback();
++++++++++++++++++++};
++++++++++++++++}

++++++++++++++++script.src+=+url;
++++++++++++++++document.body.appendChild(script);
++++++++++++}
++++++++++++loadScript("http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js",
++++++++++++++++++++function()+{
++++++++++++++++++++++++//YAHOO.namespace("mystuff");
++++++++++++++++++++++++$("#show").click(function()+{
++++++++++++++++++++++++++++$("p").show();
++++++++++++++++++++++++});
++++++++++++++++++++++++$("#hide").click(function()+{
++++++++++++++++++++++++++++$("p").hide();
++++++++++++++++++++++++});

++++++++++++++++++++++++//more...
++++++++++++++++++++});
++++++++</script>

++++</body>
</html>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|912712|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>&lt;!doctype html&gt;
&lt;html&gt;
    &lt;head&gt;

    &lt;/head&gt;
    &lt;body&gt;
        &lt;p&gt;If you click on the "Hide" button, I will disappear.&lt;/p&gt;
        &lt;button id="hide" &gt;Hide&lt;/button&gt;
        &lt;button id="show" &gt;Show&lt;/button&gt;

        &lt;script type="text/javascript"&gt;
            function loadScript(url, callback) {

                var script = document.createElement("script")
                script.type = "text/javascript";

                if (script.readyState) {  //IE
                    script.onreadystatechange = function() {
                        if (script.readyState == "loaded" ||
                                script.readyState == "complete") {
                            script.onreadystatechange = null;
                            callback();
                        }
                    };
                } else {  //Others
                    script.onload = function() {
                        callback();
                    };
                }

                script.src = url;
                document.body.appendChild(script);
            }
            loadScript("http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js",
                    function() {
                        //YAHOO.namespace("mystuff");
                        $("#show").click(function() {
                            $("p").show();
                        });
                        $("#hide").click(function() {
                            $("p").hide();
                        });

                        //more...
                    });
        &lt;/script&gt;

    &lt;/body&gt;
&lt;/html&gt;
</code></pre>


blocks|key|696690|text|在某些情况下，您可以在加载jquery时触发事件。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|696691|<script+type="text/javascript">
++++(function+(window)+{

++++++++window.jQueryHasLoaded+=+false;

++++++++document.body.addEventListener('jqueryloaded',+function+(e)+{
++++++++++++console.log('jqueryloaded+'+%2B+new+Date()+);
++++++++},+false);

++++++++function+appendScript(script)+{
++++++++++++var+tagS+=+document.createElement("script"),+
++++++++++++++++s+=+document.getElementsByTagName("script")[0];
++++++++++++tagS.src+=+script.src;
++++++++++++s.parentNode.insertBefore(tagS,+s);

++++++++++++if+(+script.id+==+'jquery'+)+{
++++++++++++++++tagS.addEventListener('load',+function+(e)+{
++++++++++++++++++++window.jQueryHasLoaded+=+true;
++++++++++++++++++++var+jQueryLoaded+=+new+Event('jqueryloaded');
++++++++++++++++++++document.body.dispatchEvent(jQueryLoaded);
++++++++++++++++},+false);
++++++++++++}
++++++++}

++++++++var+scripts+=+[
++++++++++++{
++++++++++++++++'id':+'jquery',
++++++++++++++++'src':+'js/libs/jquery/jquery-2.0.3.min.js'
++++++++++++},
++++++++++++{
++++++++++++++++'src':+'js/myscript1.js'
++++++++++++},
++++++++++++{
++++++++++++++++'src':+'js/myscript2.js'
++++++++++++}
++++++++];

++++++++for+(var+i=0;+i+<+scripts.length;+i%2B%2B)+{
++++++++++++appendScript(scripts[i]);
++++++++}

++++}(window));
</script>|code-block|syntax|javascript|696692|然后将您的依赖项包装在一个函数中：|696693|//+myscript1.js+
(function(){+

++++function+initMyjQueryDependency()+{
++++++++console.log('my+code+is+executed+after+jquery+is+loaded!');
++++++++//+here+my+code+that+depends+on+jquery
++++}

++++if+(+jQueryHasLoaded+===+true+)
++++++++initMyjQueryDependency();
++++else
++++++++document.body.addEventListener('jqueryloaded',+initMyjQueryDependency,+false);

}());|696694|如果jquery在其他脚本之后完成加载，那么当jqueryloaded事件被触发时，您的依赖项将被执行。|696695|如果已经加载了jquery，那么您的依赖项将以initMyjQueryDependency()形式执行。|offset|length|style|CODE|696696|entityMap^0|0|0|0|0|0|N|O|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|W|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|Y|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|Z|8|@$O|10|P|11|Q|R]]|9|@]|A|$]]|$1|S|3|-4|5|6|7|12|8|@]|9|@]|A|$]]]|T|$]]

<p>In certain situation you could fire an event when jquery is loaded. </p>

<pre><code>&lt;script type="text/javascript"&gt;
    (function (window) {

        window.jQueryHasLoaded = false;

        document.body.addEventListener('jqueryloaded', function (e) {
            console.log('jqueryloaded ' + new Date() );
        }, false);

        function appendScript(script) {
            var tagS = document.createElement("script"), 
                s = document.getElementsByTagName("script")[0];
            tagS.src = script.src;
            s.parentNode.insertBefore(tagS, s);

            if ( script.id == 'jquery' ) {
                tagS.addEventListener('load', function (e) {
                    window.jQueryHasLoaded = true;
                    var jQueryLoaded = new Event('jqueryloaded');
                    document.body.dispatchEvent(jQueryLoaded);
                }, false);
            }
        }

        var scripts = [
            {
                'id': 'jquery',
                'src': 'js/libs/jquery/jquery-2.0.3.min.js'
            },
            {
                'src': 'js/myscript1.js'
            },
            {
                'src': 'js/myscript2.js'
            }
        ];

        for (var i=0; i &lt; scripts.length; i++) {
            appendScript(scripts[i]);
        }

    }(window));
&lt;/script&gt;
</code></pre>

<p>Then wrap your dependencies in a function: </p>

<pre><code>// myscript1.js 
(function(){ 

    function initMyjQueryDependency() {
        console.log('my code is executed after jquery is loaded!');
        // here my code that depends on jquery
    }

    if ( jQueryHasLoaded === true )
        initMyjQueryDependency();
    else
        document.body.addEventListener('jqueryloaded', initMyjQueryDependency, false);

}());
</code></pre>

<p>If jquery finishes to load after the other scripts, your dependencies will be executed when the jqueryloaded event is fired. </p>

<p>If jquery is already loaded, <code>jQueryHasLoaded === true</code>, your dependency will be executed <code>initMyjQueryDependency()</code>. </p>


blocks|key|912812|text|用http://labjs.com加载html末尾的所有脚本，这是100%25的解决方案，我针对gtmetrix规则测试了很多次。示例http://gtmetrix.com/reports/interactio.cz/jxomHSLV|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|912813|entityMap|0|LINK|mutability|MUTABLE|url|http://labjs.com/|1|http://gtmetrix.com/reports/interactio.cz/jxomHSLV^0|1|G|0|1T|1E|1|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@$A|O|B|P|1|Q]|$A|R|B|S|1|T]]|C|$]]|$1|D|3|-4|5|6|7|U|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]|L|$5|G|H|I|C|$J|M]]]]

<p>Load all scripts at the end of html with <a href="http://labjs.com" rel="nofollow">http://labjs.com</a>, it is 100% solution and I tested it many times against gtmetrix rules.  example <a href="http://gtmetrix.com/reports/interactio.cz/jxomHSLV" rel="nofollow">http://gtmetrix.com/reports/interactio.cz/jxomHSLV</a></p>


blocks|key|696788|text|我认为Modernizr.load()在这里值得一提-它很好地处理了依赖项的加载|type|unstyled|depth|inlineStyleRanges|entityRanges|data|696789|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

<p>I think Modernizr.load() is worth a mention here - it handles dependency loading very nicely</p>


blocks|key|696879|text|我在async/defered+jquery脚本标记后面添加了这段代码，它定义了一个临时函数$，它将累积所有加载完成后运行所需的内容，然后一旦我们完成加载，就使用$，此时它将被覆盖以执行函数。有了这段代码，就不需要在文档中进一步更改jQuery+onload语法。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|696880|<script+defer+async+src="https://code.jquery.com/jquery-2.2.0.min.js">
<script>
++++var+executeLater+=+[];
++++function+$(func)+{
++++++++executeLater.push(func);
++++}
++++window.addEventListener('load',+function+()+{
++++++++$(function+()+{
++++++++++++for+(var+c+=+0;+c+<+executeLater.length;+c%2B%2B)+{
++++++++++++++++executeLater[c]();
++++++++++++}
++++++++});
++++})
</script>|code-block|syntax|javascript|696881|然后....and+..。|696882|<script>
++++$(function()+{
++++++++alert("loaded");
++++});
</script>|696883|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>I add this piece of code after the async/defered jquery script tag, this defines a temporary function $ that will accumulate whatever it is that needs to run when everything is done loading, and then once we're done use $ that by this time would be overwritten to execute the functions. With this piece of code there's no need to change the jQuery onload syntax further down in the document.</p>

<pre><code>&lt;script defer async src="https://code.jquery.com/jquery-2.2.0.min.js"&gt;
&lt;script&gt;
    var executeLater = [];
    function $(func) {
        executeLater.push(func);
    }
    window.addEventListener('load', function () {
        $(function () {
            for (var c = 0; c &lt; executeLater.length; c++) {
                executeLater[c]();
            }
        });
    })
&lt;/script&gt;
</code></pre>

<p>....and then...</p>

<pre><code>&lt;script&gt;
    $(function() {
        alert("loaded");
    });
&lt;/script&gt;
</code></pre>


blocks|key|696926|text|下面是对modern+approach+for+async/defer+javascript+loading的一个很好的描述。但它不适用于内联脚本|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|696927|<script+type="text/javascript"+src="/jquery/3.1.1-1/jquery.min.js"+defer></script>
<script+type="text/javascript"+defer>
++++$(function+()+{+++//++<-+jquery+is+not+yet+initialized
++++++...
++++});
</script>|code-block|syntax|javascript|696928|异步加载的最简单的解决方案是@nilskp+-+externalize+script：|696929|<script+type="text/javascript"+src="/jquery/3.1.1-1/jquery.min.js"+defer></script>
<script+type="text/javascript"+src="resources/js/onload.js"+defer></script>|696930|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/a/24070373/548473^0|4|1E|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@$A|V|B|W|1|X]]|C|$]]|$1|D|3|E|5|F|7|Y|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|Z|8|@]|9|@]|C|$]]|$1|K|3|L|5|F|7|10|8|@]|9|@]|C|$G|H]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|C|$]]]|N|$O|$5|P|Q|R|C|$S|T]]]]

<p>Here is a good description of <a href="https://stackoverflow.com/a/24070373/548473">modern approach for async/defer javascript loading</a>. But it doesn't works for inline scripts</p>

<pre><code>&lt;script type="text/javascript" src="/jquery/3.1.1-1/jquery.min.js" defer&gt;&lt;/script&gt;
&lt;script type="text/javascript" defer&gt;
    $(function () {   //  &lt;- jquery is not yet initialized
      ...
    });
&lt;/script&gt;
</code></pre>

<p>The simplest solution for async loading was suggested by @nilskp - externalize script:</p>

<pre><code>&lt;script type="text/javascript" src="/jquery/3.1.1-1/jquery.min.js" defer&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="resources/js/onload.js" defer&gt;&lt;/script&gt;
</code></pre>


blocks|key|913101|text|我想推迟在WordPress站点上加载jQuery，所以实际上我不能使用它更新所有的引用。相反，编写了一个小包装器来对jQuery调用进行排队，然后在最终加载时进行调用。把它插入头部，只有250个字节左右，这意味着jQuery可以被延迟或异步加载，而不需要改变所有现有的引用。让我的加载时间变得更好。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|913102|我的快速代码可能并不适用于所有的jQuery函数，但到目前为止，除了我尝试过的一个函数调用之外，其他所有函数都可以使用。通常我会做这样的自定义工作，我不会让它可用，但我想我应该把这段代码放到网上。可在此处获得https://github.com/andrewtranter/jQuery_deferred_compat|offset|length|913103|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/andrewtranter/jQuery_deferred_compat^0|0|2W|1J|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@$D|P|E|Q|1|R]]|A|$]]|$1|F|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|G|$H|$5|I|J|K|A|$L|M]]]]

<p>I wanted to defer load jQuery on a WordPress site, so I couldn't practically update all the references using it.
Instead wrote a small wrapper to queue the jQuery calls and call then whenever it's finally loaded.
Stick it in the head, only 250 bytes or so, and it means jQuery can be deferred or async loaded without altering all the existing references. Made my load times much nicer.</p>
<p>My quick code may not work for all jQuery functions, but so far has worked with everything but one function call that I've tried.
Normally I'm doing such custom stuff I don't make it available, but I thought I'd put this snippet online. Available here <a href="https://github.com/andrewtranter/jQuery_deferred_compat" rel="nofollow noreferrer">https://github.com/andrewtranter/jQuery_deferred_compat</a></p>


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

<p>Google recommends <a href="http://code.google.com/speed/page-speed/docs/payload.html#DeferLoadingJS" rel="noreferrer">deferred loading of JavaScript</a> 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.</p>

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

<pre><code>&lt;script type="text/javascript"&gt;

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

&lt;/script&gt;
</code></pre>

<p>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):</p>

<pre><code>$(document).ready(function() {
    $("#tabs").tabs();
});
</code></pre>

<p>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?</p>

<p>As a corollary, it appears that <a href="http://code.google.com/speed/page-speed/docs/rtt.html#PreferAsyncResources" rel="noreferrer">asynchronous loading</a> may also contain an answer.</p>

<p>Any thoughts?</p>


Possible to defer loading of jQuery?

WordPress

jQuery

让我们面对它，jQuery/jQuery-ui是一个沉重的下载。谷歌推荐使用来加速初始渲染。我的页面使用jQuery来设置一些标签，这些标签放在页面的下方(大多数不在初始视图之外)，我想将jQuery推迟到页面呈现之后。谷歌的延迟代码通过挂接到body onLoad事件，在页面加载后向DOM添加了一个标记：<scrip...

问可以推迟加载jQuery吗？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问可以推迟加载jQuery吗？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问可以推迟加载jQuery吗？
EN