wake-up-neo.com

skripte asynchron laden

Ich verwende verschiedene Plugins, benutzerdefinierte Widgets und einige andere Bibliotheken von JQuery. Als Ergebnis habe ich mehrere .js- und .css-Dateien. Ich muss einen Loader für meine Site erstellen, da das Laden einige Zeit dauert. es wäre schön, wenn ich den loader anzeigen kann, bevor ich alle importiere:

<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="js/myFunctions.js"></script>
<link type="text/css" href="css/main.css" rel="stylesheet" />
... 
....
 etc

Ich habe mehrere Tutorials gefunden, mit denen ich eine JavaScript-Bibliothek asynchron importieren kann. Zum Beispiel kann ich so etwas machen:

  (function () {
        var s = document.createElement('script');
        s.type = 'text/javascript';
        s.async = true;
        s.src = 'js/jquery-ui-1.8.16.custom.min.js';
        var x = document.getElementsByTagName('script')[0];
        x.parentNode.insertBefore(s, x);
    })();

wenn ich dasselbe für alle meine Dateien mache, funktionieren die Seiten aus irgendeinem Grund nicht. Ich habe so lange versucht, herauszufinden, wo das Problem liegt, aber ich kann es einfach nicht finden. Zuerst dachte ich, dass es wahrscheinlich daran lag, dass einige Javascript-Funktionen von den anderen abhingen. Ich habe sie jedoch mit der Time-Out-Funktion in der richtigen Reihenfolge geladen, als eine abgeschlossen war. Ich habe mit der nächsten fortgefahren und die Seite verhält sich immer noch seltsam. Ich kann zum Beispiel nicht auf Links klicken, aber die Animationen funktionieren trotzdem.

Sowieso

Folgendes habe ich mir gedacht ... Ich glaube, Browser haben einen Cache, weshalb das Laden der Seite sehr lange dauert und beim nächsten Mal schnell ist. Ich denke also daran, meine index.html-Seite durch eine Seite zu ersetzen, die all diese Dateien asynchron lädt. Wenn ajax fertig ist, laden Sie all diese Dateien auf die Seite, die ich verwenden möchte. Wenn Sie diese Seite verwenden, sollte das Laden nicht lange dauern, da die Dateien bereits im Cache des Browsers enthalten sein sollten. Auf meiner Indexseite (Seite, auf der .js und .css-Datei asynchron geladen werden), kümmert es mich nicht um Fehler. Ich werde nur einen Loader anzeigen und die Seite umleiten, wenn Sie fertig sind ... 

Ist diese Idee eine gute Alternative? oder sollte ich weiterhin versuchen, die asynchronen Methoden zu implementieren?

BEARBEITEN

die Art, wie ich alles asynchron lade, ist wie folgt:

importScripts();

function importScripts()
{
    //import: jquery-ui-1.8.16.custom.min.js
    getContent("js/jquery-1.6.2.min.js",function (code) {
                var s = document.createElement('script');
                s.type = 'text/javascript';
                //s.async = true;
                s.innerHTML=code;
                var x = document.getElementsByTagName('script')[0];
                x.parentNode.insertBefore(s, x);
                setTimeout(insertNext1,1);
            });


    //import: jquery-ui-1.8.16.custom.min.js
    function insertNext1()
    {
        getContent("js/jquery-ui-1.8.16.custom.min.js",function (code) {
                    var s = document.createElement('script');
                    s.type = 'text/javascript';
                    s.innerHTML=code;
                    var x = document.getElementsByTagName('script')[0];
                    x.parentNode.insertBefore(s, x);
                    setTimeout(insertNext2,1);
                });
    }

    //import: jquery-ui-1.8.16.custom.css
    function insertNext2()
    {

        getContent("css/custom-theme/jquery-ui-1.8.16.custom.css",function (code) {
                    var s = document.createElement('link');
                    s.type = 'text/css';
                    s.rel ="stylesheet";
                    s.innerHTML=code;
                    var x = document.getElementsByTagName('script')[0];
                    x.parentNode.insertBefore(s, x);
                    setTimeout(insertNext3,1);
                });
    }

    //import: main.css
    function insertNext3()
    {

        getContent("css/main.css",function (code) {
                    var s = document.createElement('link');
                    s.type = 'text/css';
                    s.rel ="stylesheet";
                    s.innerHTML=code;
                    var x = document.getElementsByTagName('script')[0];
                    x.parentNode.insertBefore(s, x);
                    setTimeout(insertNext4,1);
                });
    }

    //import: jquery.imgpreload.min.js
    function insertNext4()
    {
        getContent("js/farinspace/jquery.imgpreload.min.js",function (code) {
                    var s = document.createElement('script');
                    s.type = 'text/javascript';
                    s.innerHTML=code;
                    var x = document.getElementsByTagName('script')[0];
                    x.parentNode.insertBefore(s, x);
                    setTimeout(insertNext5,1);
                });
    }


    //import: Marquee.js
    function insertNext5()
    {
        getContent("js/Marquee.js",function (code) {
                    var s = document.createElement('script');
                    s.type = 'text/javascript';
                    s.innerHTML=code;
                    var x = document.getElementsByTagName('script')[0];
                    x.parentNode.insertBefore(s, x);
                    setTimeout(insertNext6,1);
                });
    }


    //import: Marquee.css
    function insertNext6()
    {

        getContent("css/Marquee.css",function (code) {
                    var s = document.createElement('link');
                    s.type = 'text/css';
                    s.rel ="stylesheet";
                    s.innerHTML=code;
                    var x = document.getElementsByTagName('script')[0];
                    x.parentNode.insertBefore(s, x);
                    setTimeout(insertNext,1);
                });
    }



    function insertNext()
    {
        setTimeout(pageReadyMan,10);        
    }
}


// get the content of url and pass that content to specified function
function getContent( url, callBackFunction )
{
     // attempt to create the XMLHttpRequest and make the request
     try
     {
        var asyncRequest; // variable to hold XMLHttpRequest object
        asyncRequest = new XMLHttpRequest(); // create request object

        // register event handler
        asyncRequest.onreadystatechange = function(){
            stateChange(asyncRequest, callBackFunction);
        } 
        asyncRequest.open( 'GET', url, true ); // prepare the request
        asyncRequest.send( null ); // send the request
     } // end try
     catch ( exception )
     {
        alert( 'Request failed.' );
     } // end catch
} // end function getContent

// call function whith content when ready
function stateChange(asyncRequest, callBackFunction)
{
     if ( asyncRequest.readyState == 4 && asyncRequest.status == 200 )
     {
           callBackFunction(asyncRequest.responseText);
     } // end if
} // end function stateChange

und der merkwürdige Teil ist, dass die Arbeit des Stils plus alle Javascript-Funktionen funktioniert. Die Seite ist jedoch aus irgendeinem Grund eingefroren ...

javascripthtmlajaxhtml5asynchronous
111
Tono Nam

Ein paar Lösungen für das asynchrone Laden:

//this function will work cross-browser for loading scripts asynchronously
function loadScript(src, callback)
{
  var s,
      r,
      t;
  r = false;
  s = document.createElement('script');
  s.type = 'text/javascript';
  s.src = src;
  s.onload = s.onreadystatechange = function() {
    //console.log( this.readyState ); //uncomment this line to see which ready states are called.
    if ( !r && (!this.readyState || this.readyState == 'complete') )
    {
      r = true;
      callback();
    }
  };
  t = document.getElementsByTagName('script')[0];
  t.parentNode.insertBefore(s, t);
}

Wenn Sie jQuery bereits auf der Seite haben, verwenden Sie einfach:

$.getScript(url, successCallback) *

Darüber hinaus ist es möglich, dass Ihre Skripts geladen/ausgeführt werden, bevor das Dokument vollständig geladen ist. Dies bedeutet, dass Sie auf document.ready warten müssen, bevor Ereignisse an die Elemente gebunden werden können.

Es ist nicht möglich, genau zu sagen, was Ihr Problem ist, ohne den Code zu sehen.

Die einfachste Lösung besteht darin, alle Skripts am unteren Rand der Seite inline zu halten, damit das Laden von HTML-Inhalten während der Ausführung nicht blockiert wird. Es vermeidet auch das Problem, dass jedes erforderliche Skript asynchron geladen werden muss.

Wenn Sie eine besonders ausgefallene Interaktion haben, die nicht immer verwendet wird und ein größeres Skript erforderlich ist, kann es sinnvoll sein, das Laden dieses bestimmten Skripts zu vermeiden, bis es benötigt wird (Lazy Loading).

* Skripte, die mit $.getScript geladen werden, werden wahrscheinlich nicht zwischengespeichert

Für jeden, der moderne Funktionen wie das Objekt Promise verwenden kann, ist die Funktion loadScript wesentlich einfacher geworden:

function loadScript(src) {
    return new Promise(function (resolve, reject) {
        var s;
        s = document.createElement('script');
        s.src = src;
        s.onload = resolve;
        s.onerror = reject;
        document.head.appendChild(s);
    });
}

Beachten Sie, dass diese Version ein callback-Argument nicht mehr akzeptiert, da das zurückgegebene Versprechen den Rückruf behandelt. Was bisher loadScript(src, callback) gewesen wäre, wäre jetzt loadScript(src).then(callback).

Dies hat den zusätzlichen Vorteil, dass Sie Fehler erkennen und handhaben können.

loadScript(cdnSource)
    .catch(loadScript.bind(null, localSource))
    .then(successCallback, failureCallback);

... und es würde CDN-Ausfälle elegant behandeln.

155
zzzzBov

Das neue Attribut 'async' von HTML5 sollte den Trick erfüllen. 'defer' wird auch in den meisten Browsern unterstützt, wenn Sie sich für IE interessieren. 

async - Das HTML

<script async src="siteScript.js" onload="myInit()"></script>

defer - Das HTML

<script defer src="siteScript.js" onload="myInit()"></script>

Bei der Analyse des neuen Codes für AdSense-Anzeigenblöcke bemerkte ich das Attribut und eine Suche führte mich hier: http://davidwalsh.name/html5-async

27
Donald Porter

Ich lud die Skripte asynchron (html 5 hat diese Funktion), wenn alle Skripte fertig geladen wurden. Ich habe die Seite zu index2.html umgeleitet, wobei index2.html die gleichen Bibliotheken verwendet. Da Browser über einen Cache verfügen, sobald die Seite zu index2.html umgeleitet wird, wird index2.html in weniger als einer Sekunde geladen, da sie zum Laden der Seite alles hat. In meine index.html-Seite lade ich auch die Bilder, die ich verwenden möchte, damit der Browser diese Bilder in den Cache legt. so sieht meine index.html so aus:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Project Management</title>

    <!-- the purpose of this page is to load all the scripts on the browsers cache so that pages can load fast from now on -->

    <script type="text/javascript">

        function stylesheet(url) {
            var s = document.createElement('link');
            s.type = 'text/css';
            s.async = true;
            s.src = url;
            var x = document.getElementsByTagName('head')[0];
            x.appendChild(s);
        }

        function script(url) {
            var s = document.createElement('script');
            s.type = 'text/javascript';
            s.async = true;
            s.src = url;
            var x = document.getElementsByTagName('head')[0];
            x.appendChild(s);
        }

        //load scritps to the catche of browser
        (function () {            
                stylesheet('css/custom-theme/jquery-ui-1.8.16.custom.css');
                stylesheet('css/main.css');
                stylesheet('css/Marquee.css');
                stylesheet('css/mainTable.css');

                script('js/jquery-ui-1.8.16.custom.min.js');
                script('js/jquery-1.6.2.min.js');
                script('js/myFunctions.js');
                script('js/farinspace/jquery.imgpreload.min.js');
                script('js/Marquee.js');            
        })();

    </script>

    <script type="text/javascript">
       // once the page is loaded go to index2.html
        window.onload = function () {
            document.location = "index2.html";
        }
    </script>

</head>
<body>

<div id="cover" style="position:fixed; left:0px; top:0px; width:100%; height:100%; background-color:Black; z-index:100;">Loading</div>

<img src="images/home/background.png" />
<img src="images/home/3.png"/>
<img src="images/home/6.jpg"/>
<img src="images/home/4.png"/>
<img src="images/home/5.png"/>
<img src="images/home/8.jpg"/>
<img src="images/home/9.jpg"/>
<img src="images/logo.png"/>
<img src="images/logo.png"/>
<img src="images/theme/contentBorder.png"/>

</body>
</html>

eine weitere schöne Sache dazu ist, dass ich möglicherweise einen Loader auf der Seite platzieren kann. Wenn die Seite vollständig geladen ist, wird der Loader entfernt und in einer Matte von Millisekunden wird die neue Seite ausgeführt. 

7
Tono Nam

Beispiel von Google 

<script type="text/javascript">
  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js?onload=onLoadCallback';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>
6
Kernel Med

Einige Hinweise: 

  • s.async = true ist für HTML5-Doctype nicht sehr korrekt, richtig ist s.async = 'async' (tatsächlich verwendet trueist richtig, dank amn der darauf im Kommentar unten hingewiesen hat)
  • Die Verwendung von Timeouts zur Steuerung der Reihenfolge ist nicht sehr gut und sicher, und Sie erhöhen auch die Ladezeit um die Summe aller Timeouts!

Da es einen aktuellen Grund gibt, Dateien asynchron zu laden, aber um dies zu tun, würde ich etwas mehr Funktionsorientiertes über Ihr Beispiel empfehlen (entfernen Sie console.log für Produktionszwecke :)):

(function() {
    var prot = ("https:"===document.location.protocol?"https://":"http://");

    var scripts = [
        "path/to/first.js",
        "path/to/second.js",
        "path/to/third.js"
    ];

    function completed() { console.log('completed'); }  // FIXME: remove logs

    function checkStateAndCall(path, callback) {
        var _success = false;
        return function() {
            if (!_success && (!this.readyState || (this.readyState == 'complete'))) {
                _success = true;
                console.log(path, 'is ready'); // FIXME: remove logs
                callback();
            }
        };
    }

    function asyncLoadScripts(files) {
        function loadNext() { // chain element
            if (!files.length) completed();
            var path = files.shift();
            var scriptElm = document.createElement('script');
            scriptElm.type = 'text/javascript';
            scriptElm.async = true;
            scriptElm.src = prot+path;
            scriptElm.onload = scriptElm.onreadystatechange = \
                checkStateAndCall(path, loadNext); // load next file in chain when
                                                   // this one will be ready 
            var headElm = document.head || document.getElementsByTagName('head')[0];
            headElm.appendChild(scriptElm);
        }
        loadNext(); // start a chain
    }

    asyncLoadScripts(scripts);
})();
6
shaman.sir

Dank HTML5 können Sie jetzt die Skripts deklarieren, die Sie asynchron laden möchten, indem Sie "async" im Tag hinzufügen: 

<script async>...</script>

Anmerkung: Das async-Attribut gilt nur für externe Skripts (und sollte nur verwendet werden, wenn das src-Attribut vorhanden ist).

Hinweis: Es gibt mehrere Möglichkeiten, ein externes Skript auszuführen:

  • Wenn asynchron vorhanden ist: Das Skript wird asynchron mit dem Rest der Seite ausgeführt (das Skript wird ausgeführt, während die Seite die Analyse fortsetzt).
  • Wenn async nicht vorhanden und verzögert ist: Das Skript wird ausgeführt, wenn die Analyse der Seite abgeschlossen ist
  • Wenn weder asynchron noch zurückgestellt ist: Das Skript wird sofort abgerufen und ausgeführt, bevor der Browser die Seite weiter analysiert

Siehe dies: http://www.w3schools.com/tags/att_script_async.asp

3
odroz

Hier ist eine großartige zeitgemäße Lösung für das Laden des asynchronen Skripts, obwohl das js-Skript nur mit async false adressiert wird. 

Es gibt einen großartigen Artikel in www.html5rocks.com - Tief in die düsteren Gewässer des Script-Ladens eintauchen .

Nach der Prüfung vieler möglicher Lösungen kam der Autor zu dem Schluss, dass das Hinzufügen von js-Skripts zum Ende des body-Elements der beste Weg ist, um das Blockieren der Seitenwiedergabe durch js-Skripts zu vermeiden. 

In der Zwischenzeit hat der Autor eine weitere gute alternative Lösung für diejenigen hinzugefügt, die verzweifelt versuchen, Skripts asynchron zu laden und auszuführen. 

Wenn Sie vier Skripte mit dem Namen script1.js, script2.js, script3.js, script4.js in Betracht ziehen, können Sie dies mit anwenden, das async = false verwendet: 

[
  'script1.js',
  'script2.js',
  'script3.js',
  'script4.js'
].forEach(function(src) {
  var script = document.createElement('script');
  script.src = src;
  script.async = false;
  document.head.appendChild(script);
});

Nun sagt Spec: Zusammen herunterladen, nacheinander ausführen, sobald alle heruntergeladen sind.

Firefox <3.6, Opera sagt: Ich habe keine Ahnung, was dieses "async" -Ding ist, aber es passiert einfach so, dass ich Skripte, die über JS hinzugefügt wurden, in der Reihenfolge ausführen, in der sie hinzugefügt wurden.

Safari 5.0 sagt: Ich verstehe "async", aber nicht, wenn Sie es mit JS auf "false" setzen. Ich werde Ihre Skripte ausführen, sobald sie landen, in beliebiger Reihenfolge.

IE <10 sagt: Keine Ahnung von "async", aber es gibt eine Problemumgehung mit "onreadystatechange".

Alles andere sagt: Ich bin dein Freund, wir werden das mit dem Buch tun.

Jetzt den vollständigen Code mit IE <10 Problemumgehung: 

var scripts = [
  'script1.js',
  'script2.js',
  'script3.js',
  'script4.js'
];
var src;
var script;
var pendingScripts = [];
var firstScript = document.scripts[0];

// Watch scripts load in IE
function stateChange() {
  // Execute as many scripts in order as we can
  var pendingScript;
  while (pendingScripts[0] && ( pendingScripts[0].readyState == 'loaded' || pendingScripts[0].readyState == 'complete' ) ) {
    pendingScript = pendingScripts.shift();
    // avoid future loading events from this script (eg, if src changes)
    pendingScript.onreadystatechange = null;
    // can't just appendChild, old IE bug if element isn't closed
    firstScript.parentNode.insertBefore(pendingScript, firstScript);
  }
}

// loop through our script urls
while (src = scripts.shift()) {
  if ('async' in firstScript) { // modern browsers
    script = document.createElement('script');
    script.async = false;
    script.src = src;
    document.head.appendChild(script);
  }
  else if (firstScript.readyState) { // IE<10
    // create a script and add it to our todo pile
    script = document.createElement('script');
    pendingScripts.Push(script);
    // listen for state changes
    script.onreadystatechange = stateChange;
    // must set src AFTER adding onreadystatechange listener
    // else we’ll miss the loaded event for cached scripts
    script.src = src;
  }
  else { // fall back to defer
    document.write('<script src="' + src + '" defer></'+'script>');
  }
}
2
asmmahmud

Ich würde die Antwort von zzzzBov mit einer Prüfung auf Vorhandensein eines Rückrufs abschließen und die Weitergabe von Argumenten erlauben:

    function loadScript(src, callback, args) {
      var s, r, t;
      r = false;
      s = document.createElement('script');
      s.type = 'text/javascript';
      s.src = src;
      if (typeof(callback) === 'function') {
        s.onload = s.onreadystatechange = function() {
          if (!r && (!this.readyState || this.readyState === 'complete')) {
            r = true;
            callback.apply(args);
          }
        };
      };
      t = document.getElementsByTagName('script')[0];
      t.parent.insertBefore(s, t);
    }
2
Tibo

Ich würde vorschlagen, dass Sie einen Blick auf Modernizr werfen. Es ist eine kleine, leichtgewichtige Bibliothek, mit der Sie Ihr Javascript asynchron mit Funktionen laden können, mit denen Sie prüfen können, ob die Datei geladen ist, und das Skript in dem von Ihnen angegebenen anderen ausführen.

Hier ist ein Beispiel für das Laden von Jquery:

Modernizr.load([
  {
    load: '//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.js',
    complete: function () {
      if ( !window.jQuery ) {
            Modernizr.load('js/libs/jquery-1.6.1.min.js');
      }
    }
  },
  {
    // This will wait for the fallback to load and
    // execute if it needs to.
    load: 'needs-jQuery.js'
  }
]);
1
Shawn Mclean

Sie könnten diesen Wiki-Artikel interessant finden: http://ajaxpatterns.org/On-Demand_Javascript

Es wird erläutert, wie und wann eine solche Technik angewendet wird.

1
tereško

Ich habe einen kleinen Beitrag geschrieben, um hier zu helfen. Sie können hier mehr erfahren https://timber.io/snippets/asynchronously-load-a-script-in-the-browser-with-javascript/ , aber Ich habe die Helferklasse unten angehängt. Es wird automatisch darauf gewartet, dass ein Skript geladen wird und ein angegebenes Fensterattribut zurückgibt, sobald dies der Fall ist.

export default class ScriptLoader {
  constructor (options) {
    const { src, global, protocol = document.location.protocol } = options
    this.src = src
    this.global = global
    this.protocol = protocol
    this.isLoaded = false
  }

  loadScript () {
    return new Promise((resolve, reject) => {
      // Create script element and set attributes
      const script = document.createElement('script')
      script.type = 'text/javascript'
      script.async = true
      script.src = `${this.protocol}//${this.src}`

      // Append the script to the DOM
      const el = document.getElementsByTagName('script')[0]
      el.parentNode.insertBefore(script, el)

      // Resolve the promise once the script is loaded
      script.addEventListener('load', () => {
        this.isLoaded = true
        resolve(script)
      })

      // Catch any errors while loading the script
      script.addEventListener('error', () => {
        reject(new Error(`${this.src} failed to load.`))
      })
    })
  }

  load () {
    return new Promise(async (resolve, reject) => {
      if (!this.isLoaded) {
        try {
          await this.loadScript()
          resolve(window[this.global])
        } catch (e) {
          reject(e)
        }
      } else {
        resolve(window[this.global])
      }
    })
  }
}

Die Nutzung ist wie folgt:

const loader = new Loader({
    src: 'cdn.segment.com/analytics.js',
    global: 'Segment',
})

// scriptToLoad will now be a reference to `window.Segment`
const scriptToLoad = await loader.load()
1
Zach

Ein Grund dafür, dass Ihre Skripte möglicherweise so langsam geladen werden, ist, wenn Sie beim Laden der Seite alle Skripts ausführen, z.

callMyFunctions();

anstatt:

$(window).load(function() {
      callMyFunctions();
});

Dieses zweite Skript wartet, bis der Browser Ihren gesamten Javascript-Code vollständig geladen hat, bevor er mit der Ausführung Ihrer Skripts beginnt. Dadurch wird dem Benutzer angezeigt, dass die Seite schneller geladen wurde.

Wenn Sie die Benutzererfahrung verbessern möchten, indem Sie die Ladezeit verkürzen, würde ich nicht die Option "Ladebildschirm" wählen. Meiner Meinung nach wäre das viel ärgerlicher, als die Seite nur langsamer zu laden.

1
therin

Hier eine kleine ES6-Funktion, wenn jemand sie zum Beispiel in React verwenden möchte

import {uniqueId} from 'lodash' // optional
/**
 * @param {String} file The path of the file you want to load.
 * @param {Function} callback (optional) The function to call when the script loads.
 * @param {String} id (optional) The unique id of the file you want to load.
 */
export const loadAsyncScript = (file, callback, id) => {
  const d = document
  if (!id) { id = uniqueId('async_script') } // optional
  if (!d.getElementById(id)) {
    const tag = 'script'
    let newScript = d.createElement(tag)
    let firstScript = d.getElementsByTagName(tag)[0]
    newScript.id = id
    newScript.async = true
    newScript.src = file
    if (callback) {
      // IE support
      newScript.onreadystatechange = () => {
        if (newScript.readyState === 'loaded' || newScript.readyState === 'complete') {
          newScript.onreadystatechange = null
          callback(file)
        }
      }
      // Other (non-IE) browsers support
      newScript.onload = () => {
        callback(file)
      }
    }
    firstScript.parentNode.insertBefore(newScript, firstScript)
  } else {
    console.error(`The script with id ${id} is already loaded`)
  }
}

0
JoxieMedina

Hier ist meine benutzerdefinierte Lösung zum Entfernen von JavaScript, das das Rendering blockiert:

// put all your JS files here, in correct order
const libs = {
  "jquery": "https://code.jquery.com/jquery-2.1.4.min.js",
  "bxSlider": "https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/jquery.bxslider.min.js",
  "angular": "https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-beta.2/angular.min.js",
  "ngAnimate": "https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.2/angular-animate.min.js"
}
const loadedLibs = {}
let counter = 0

const loadAsync = function(lib) {
  var http = new XMLHttpRequest()
  http.open("GET", libs[lib], true)
  http.onload = () => {
    loadedLibs[lib] = http.responseText
    if (++counter == Object.keys(libs).length) startScripts()
  }
  http.send()
}

const startScripts = function() {
  for (var lib in libs) eval(loadedLibs[lib])
  console.log("allLoaded")
}

for (var lib in libs) loadAsync(lib)

Kurz gesagt, es lädt alle Ihre Skripte asynchron und führt sie anschließend aus.

Github Repo: https://github.com/mudroljub/js-async-loader

0
Damjan Pavlica

Schauen Sie sich diesen https://github.com/stephen-lazarionok/async-resource-loader an. In einem Beispiel wird gezeigt, wie JS, CSS und mehrere Dateien mit einem Schuss geladen werden.

0
Stephen L.

Nun, x.parentNode gibt das Element HEAD zurück, sodass Sie das Skript unmittelbar vor dem head-Tag einfügen. Vielleicht ist das das Problem.

Versuchen Sie stattdessen x.parentNode.appendChild().

0
alekop

Haben Sie überlegt, Fetch Injection zu verwenden? Ich habe eine Open-Source-Bibliothek namens fetch-inject gerollt, um Fälle wie diese zu behandeln. So könnte Ihr Loader mit der lib aussehen:

fetcInject([
  'js/jquery-1.6.2.min.js',
  'js/Marquee.js',
  'css/Marquee.css',
  'css/custom-theme/jquery-ui-1.8.16.custom.css',
  'css/main.css'
]).then(() => {
  'js/jquery-ui-1.8.16.custom.min.js',
  'js/farinspace/jquery.imgpreload.min.js'
})

Um die Rückwärtskompatibilität zu gewährleisten, können Sie die Feature-Erkennung nutzen und auf XHR Injection oder Script DOM Elements zurückgreifen. Oder Sie fügen die Tags einfach mit document.write in die Seite ein.

0
Josh Habdas

Sie können LABJS oder RequreJS verwenden.

Skriptlader wie LABJS, RequireJS verbessern die Geschwindigkeit und Qualität Ihres Codes.

0
Kaushik