jquery dynamisches laden von externen Skript-Dateien, bevor Sie $(document).ready()

Können Sie jQuery.holdReady(). Dies ermöglicht die Verzögerung der jQuery-ready-Ereignis erst nach dem script geladen hat.

$.holdReady(true);
$.getScript("myplugin.js", function() {
     $.holdReady(false);
});

Benutze ich $.getScript() ausgiebig für scripts, die sich auf jQuery heruntergeladen wird zunächst als $.getScript() nicht instanziieren, bis jQuery geladen ist (es ist eine Methode von jQuery selbst, so kann nicht ausgeführt werden, es sei denn, qQuery erfolgreich geladen wurde, die Lösung eines jQuery-Abhängigkeit).

Ein paar Randnotizen:

• $.getScript() Kräfte download, es NIE verwendet zwischengespeicherte Kopien. cane nützlich sein, wenn Sie wollen immer frische downloads. Sie können die $.ajax() Methode, wenn Sie wollen, um die Zwischenspeicherung zu aktivieren. Dies ermöglicht eine ERHEBLICHE Leistung steigern, wenn das herunterladen großer Dateien wie jQuery-ui-auf den nachfolgenden Seiten. Ich werde ein Beispiel geben, am Ende dieser Antwort.

• Aufgrund der $.getScript() Methode mit der jqxhr Modell, Sie können überprüfen für einen fehlgeschlagenen script laden, und die exception wird geworfen. Die $.getScript() Funktion hat eine .fail() handler angehängt, Sie können es verwenden, wie diese...

mit $.getScript()

var urlToLoad = "testLoader.js";

$.getScript("js/slickGrid/jquery.event.drag-2.0.min.js",function(){
    // Execute script on successful load
 }).fail(function(jqxhr, settings, exception) {  
        // Code to execute if script fails to load any further
        document.write('FAILED Script Load '+urlToLoad +': '+exception)
    });

mit $.ajax() (für caching-Zwecke)

var urlToLoad = "testLoader.js";

$.ajax({
   dataType: "script",
   url: "someurl.php",
   cache: true,
   success: function() {
       // code to execute on script load success
   }
}).fail(function(jqxhr, settings, exception) {  
        // Code to execute if script fails to load any further
        document.write('FAILED Script Load '+urlToLoad +': '+exception)
    });

Ich persönlich schreib die Fehlercodes auf dem Bildschirm, so dass ich sehen kann der Anschlag ein wenig einfacher als in einer Konsole, und ich habe gefunden, dass die Konsole.log-Ausgabe manchmal nicht für mich je nach meiner debug-software. Hilft sehr bei der Fehlersuche. Mit dieser Implementierung können Sie eine einfache dependency loader. Definieren Sie eine Reihe von Skripten ausführen einer Funktion, um das Feuer der $.ajax() Funktion, und etwas tun, wenn Sie fertig sind. Und voila, die Abhängigkeit aufgelöst. ReuireJAS dies tut, aber es ist ein Satz von Skripten und zusätzliche lod Zeiten. Sie haben jQuery bereits geladen wurde, also warum nicht!

Beispiel der Auflösung von Abhängigkeiten bitte halten Sie credits, wenn Sie es verwenden,... 🙂

/*-----------------------------------
* Script is free to use as long as 
* credits stay attached to script here.

* jQuery Dependency Loader
* created: May 15, 2012  
* author: Darren Maurer
* CEO/CIO/President
* Monarch Research International
* http://MonarchResearch.ca

using jQuery-1.7.2.min.js.php (caching enabled)
------------------------------------*/

// Array of fileName to include in loader      
var urlsToLoadInOrder = ["js/file1.js","js/file2.js","js/file3.js"];

function ProcessDependency(urlArrayPointer) {

        if (urlArrayPointer >= urlsToLoadInOrder.length) {
            return;
        }

    var attemptedFile = urlsToLoadInOrder[urlArrayPointer];

    $.ajax({
       dataType: "script",
       url: attemptedFile,
       //Enable caching for performance, disable with 'cache: false'
       cache: true, 
       success: function() {
           // code to execute on script load success
           urlArrayPointer++;
           ProcessDependency(urlArrayPointer);
       }
    }).fail(function(jqxhr, settings, exception) {  
            // Code to execute if script fails to load any further
            alert('FAILED Script Load '+attemptedFile +': '+exception);
            return false;
        });
}

// Set pointer to zero and instantiate the loader
ProcessDependency(0);

// All scripts successfully loaded in order, dependencies resolved
alert('loads complete');

Dann nur diese beiden Zeilen auf Ihrem Haupt .html-oder .php-Seite

<script type="text/javascript" src="js/jquery-1.7.2.min.js.php"></script>
<script src="ajaxDependencyLoader.js"> </script>

UND VOILA!!! Die einfachste Abhängigkeit loader habe ich trotzdem gefunden 🙂

Der Grund, warum ich diese Methode verwenden, ist für die Auflösung von Abhängigkeiten zwischen meinen Skripten. Jede Abhängigkeit-set ist definiert als ein array, und ich Schleife durch, Sie laden um, und ich bin glücklich 🙂