La possibilité de différer le chargement de jQuery?

Question

Avouons-le, jQuery/jQuery ui est une lourde télécharger.

Google recommande différés chargement des JavaScript pour accélérer la vitesse initiale de rendu. Ma page utilise jQuery pour mettre en place certains onglets qui sont placés au bas de la page (la plupart du temps hors de la vue initiale) et j'aimerais reporter jQuery jusqu'à APRÈS que la page a rendu.

Google report de code ajoute une balise pour les DOM après le chargement de la page, en l'accrochant dans le corps à l'événement onLoad:

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

Je tiens à différer le chargement de jQuery de cette façon, mais quand je l'ai essayé mon code jQuery échoué à trouver jQuery (pas tout à fait inattendu de ma part):

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

Il me semble que j'ai besoin de trouver un moyen de différer l'exécution de mon code jQuery jusqu'à ce que jQuery est chargé. Comment puis-je détecter que le tag a la fin du chargement et de l'analyse?

En corollaire, il apparaît que le chargement asynchrone peut également contenir une réponse.

Toutes les pensées?

Answer 1

Essayez ceci, qui est quelque chose que j'ai édité il y a un moment de la jQuerify bookmarklet. Je l'utilise fréquemment pour charger jQuery et d'exécuter des trucs après il est chargé. Bien sûr, vous pouvez remplacer l'url avec votre propre url de votre personnalisé 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
        });
    })();

Je voudrais vraiment combiner jQuery et jQuery UI dans un fichier et d'utiliser une url pour elle. Si vous avez VRAIMENT envie de les charger séparément, la chaîne de la getScripts:

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

Answer 2

Comme c'est un classement de question sur un sujet important, permettez-moi d'être si audacieux de fournir mon propre chef, prendre sur cela repose sur une précédente réponse de @valmarv et @amparsand.

Je suis à l'aide d'un tableau multidimensionnel de charger les scripts. En regroupant ceux qui n'ont pas de dépendances entre eux:

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++) {
        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;

Chargement de jquery après il est chargé de continuer à charger les autres scripts à la fois. Vous pouvez ajouter des scripts facile en ajoutant à l'ensemble de n'importe où sur votre page:

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

Answer 3

element.addEventListener("load", function () {
    $('#tabs').tabs()
}, false);

Essayez que.

Answer 4

Mettre jQuery et votre jQuery code dépendant à la fin de votre fichier HTML.

Edit: Un peu plus clair

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

Answer 5

Dans certaines situations, vous pouvez déclencher un événement lorsque jquery est chargé.

<script type="text/javascript">
    (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 < scripts.length; i++) {
            appendScript(scripts[i]);
        }

    }(window));
</script>

Puis enveloppez vos dépendances dans une fonction:

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

}());

Si jquery finitions à la charge après les autres scripts, vos dépendances sera exécutée lorsque la jqueryloaded événement est déclenché.

Si jquery est déjà chargé, jQueryHasLoaded === true, votre dépendance sera exécutée initMyjQueryDependency().