Inline-Javascript-Ausführung verzögern?

Question

In meiner Website habe ich viele Inline-JavaScript-Snippets. Die meisten von ihnen erfordern Jquery und ähnliches.

Aber ich würde jquery load nach dem Rendern der Seite verzögern. Und das bedeutet, dass mein Inline-Javascript ausgeführt würde, bevor jquery geladen wurde. Kann ich irgendetwas dagegen tun? Ich suche nach einfach zu implementierenden Lösungen (Ich kann auch mein Inline-Javascript nicht bewegen, da es automatisch generiert wird, während die Seite für den Benutzer vorbereitet wird).

Answer 1

Sie könnten einen Zurückstellungs simulieren, indem die type des Inline-Scripts auf einer Einstellung, die vom Browser verarbeitet wird nicht wie text/example, und die diese Skripte am Ende des Dokuments Klonierung des type mit text/javascript ersetzen.

Der Code, der alle text/examples Prozesse ist wirklich einfach:

window.addEventListener("load", function() { 

    var arr = document.querySelectorAll("script[type='text/example']"); 
    for (var x = 0; x < arr.length; x++) { 
     var cln = arr[x].cloneNode(true); 
     cln.type = "text/javascript"; 
     document.querySelectorAll("body")[0].appendChild(cln); 
    } 

}); 

Oder wenn Sie jQuery verwenden möchten (Sie werden dieses Skript nach einschließlich der jQuery-Datei hinzuzufügen haben):

$(function() { 
    $("script[type='text/example']").each(function() { 
     $(this).clone().attr("type","text/javascript").appendTo("body"); 
    }); 
}); 

Dieser Code wartet, bis die Seite geladen wird, wählt dann alle Skripte mit Typ text/example, und kopiert sie am Ende der body mit einer Art von text/javascript, so dass sie normal ausgeführt werden.

Zum Beispiel:

... 
<script type="text/example"> 
    console.log("I am before the h1"); 
</script> 

<h1>Page Title</h1> 

<script type="text/javascript"> 
    console.log("I am after the h1"); 
</script> 
... 

in diesen Meldungen in der Konsole führen:

Ich bin nach dem h1

ich vor dem h1 am

Sie kann eine laufende Demo auf diesem JSFiddle sehen: http://jsfiddle.net/rqckwc79/

---

Vorteile dieser Lösung:

• Es ist eine Cross-Browser-Lösung.
• Der Code ist gültig HTML/JavaScript.
• Es funktioniert im strikten Modus.

Nachteile dieser Lösung:

• Sie müssen die Kontrolle über das Inline-Scripts haben, um die type zu ändern.
• Wie troelskn sagte, wäre die Leistung schlechter, als den gesamten Code nach unten zu verschieben (aber ich verstehe, dass es Situationen gibt, in denen das nicht möglich ist).
• Es funktioniert nicht mit älteren IE-Versionen (obwohl der Code geändert werden könnte, um sie zu unterstützen).