Obecnie mam plik jqueryui.js, do którego odnosi się za pomocą znacznika <script>.
Mam kilka funkcji kilku $ (dokument).

Próbuję załadować plik jqueryui.js dynamicznie za pomocą $ .getscript

Próbowałem następującego kodu ...

var scriptCntr = 0;
$(document.ready(function(){
    scriptCntr ++;
    $.getScript(path, function (data, textStatus) {
        scriptCntr --;
    });
    while(scriptCntr!=0){
    } 
});

Na górze strony. Chodzi o pomysł, aby zrobić $ (Document) Plik nie byłby pobierany, chyba że zostanie wykonany wszystkie $ (Document) .Ready ().

Czy istnieje sposób na pobranie pliku jqueryui.js przed pierwszym $ (Document) .Ready () jest wykonywany?

Z góry dziękuję.

2
Raghav 2 listopad 2011, 17:04

3 odpowiedzi

Najlepsza odpowiedź

Możesz użyć jQuery.holdready (). Umożliwia to opóźnienie gotowego zdarzenia jQuery, aż po załadowaniu skryptu.

$.holdReady(true);
$.getScript("myplugin.js", function() {
     $.holdReady(false);
});
10
aziz punjani 2 listopad 2011, 13:18

Możesz użyć tego kodu dla tego celu:

var wf = document.createElement('script');
        wf.src = 'http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
        wf.type = 'text/javascript';
        wf.async = 'true';
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(wf, s);
2
Sergey 2 listopad 2011, 13:07

Używam $.getScript(), aby rozszerzyć skrypty, które polegają na jQuery pobrane najpierw jako $.getScript() nie będzie instancji, dopóki $.getScript() nie będzie instancji, dopóki JQUERY jest załadowany (jest to metoda samego jQuery, więc nie może biegać załadował pomyślnie, rozwiązywanie zależności jQuery).

Kilka uwag dodatkowych:

  • $.getScript() Wymusza pobierz, IT nigdy wykorzystuje kopie buforowane. Cane jest przydatne, jeśli zawsze chcesz świeże pliki do pobrania. Możesz użyć metody $.ajax(), jeśli chcesz włączyć buforowanie. Pozwala to na zwiększenie wydajności , przy pobieraniu dużych plików, takich jak jQuery-ui na kolejnych stronach. Podarę przykład na końcu tej odpowiedzi.

  • Ze względu na metodę $.getScript() za pomocą modelu JQXHR można sprawdzić, czy nieudany ładunek skryptu i wyrzucony wyjątek. Funkcja $.getScript() ma przyłączony ładunek .fail(), możesz go użyć takich ...

za pomocą $ .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)
    });

za pomocą $ .ajax () (do celów buforowania)

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

Osobiście piszę kody błędów na ekranie, dzięki czemu widzę punkt zatrzymania trochę łatwiejszy niż w konsoli, a ja znalazłem produkcję konsoli.log czasami zawodzi dla mnie w zależności od oprogramowania debugowania. Pomaga wiele do rozwiązywania problemów. Korzystając z tej implementacji, możesz wykonać prostą ładowarkę zależną. Zdefiniuj tablicę skryptów, wykonaj funkcję, aby ogniować funkcję $.ajax() i zrób coś, kiedy są zrobione. I voila, uzależnienie rozwiązane. ReuireireJas to robi, ale jest to zestaw skryptów i dodatkowych czasów LOD. Masz już załadowany jQuery, więc dlaczego tego nie zrobił!

Przykład rozdzielczości zależności Zachowaj kredyty, jeśli go użyj ... :)

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

Następnie weź te dwie linie na stronie głównej .html lub .php

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

i voila !!! najłatwiejszy w użyciu zależny ładowarki znalazłem jeszcze :)

Powód, dla którego korzystam z tej metody, dotyczy rozdzielczości zależności między moich skryptów. Każdy zestaw zależności jest zdefiniowany jako tablica i pętelę przez niego, ładują się w porządku i jestem szczęśliwy :)

2
MaurerPower 2 czerwiec 2012, 02:46