Javascript laden externe Frameworks nach onReady

Normalerweise haben Sie alle Ihre Frameworks (Skripte und CSS) in Ihrem Kopf-Element auf Ihrem HTML-Quellcode und beim Rendern der Seite werden sie geladen. Zum Beispiel Ich möchte jQuery laden und Bootstrap es in etwa so aussehen würde:Javascript laden externe Frameworks nach onReady

<html> 
    <head> 
    <script src="jquery.min.js"></script> 
    <script src="bootstrap.min.js"></script> 
    <link href="jquery.min.css"\> 
    <link href="bootstrap.min.css"\> 
    </head> 
</html>

Aber stellen Sie sich eine Situation, wo Sie haben nur jQuery von Anfang an geladen und Sie möchten eine Aktion wie Klicken auf eine Schaltfläche ausführen und einige Rahmen brauchen Funktionalitäten wie etwas, das Bootstrap bietet, müssten direkt nach dem Klick geladen werden.

In meinem Verständnis ist das nicht so einfach wie es klingt, da das Framework, das geladen werden muss, nachdem die Seite bereits gerendert wurde, einen OnReady-Aufruf ausführen muss. Gibt es einen einfachen Weg, dies zu erreichen?

Mit freundlichen Grüßen Marius

Quelle

2017-04-04 marius

die beste Praxis ist für Skripte in die gehen Ende des Body-Tags, nicht im Kopf –

Sie können diese Aufrufe manuell auslösen wie '$ (document) .trigger ('ready')' –

Paket eine Ansichten/Seite erforderlichen Dateien in ein Bündel und laden Sie das? Würde die Verwendung von 'RequireJs' helfen? Gibt es eine konkrete Frage? Oder ein Beispiel, das Sie schreiben können, um Ihr Problem zu demonstrieren? – Nope

„eine Situation vorstellen, in der Sie nur jQuery von Anfang an geladen und Sie möchten eine Aktion wie Klicken auf eine Schaltfläche ausführen und einige Rahmen Funktionalitäten wie etwas, das bietet Bootstrap, sie müsste direkt nach dem Klick geladen werden. "

Was Sie beschreiben, ist lazy loading der Abhängigkeiten.

RequireJS tut das sehr gut.

Quelle

2017-04-04 12:40:43

Wenn Sie denken, dies zu tun, die Benutzer-Seitenladeleistung zu beschleunigen, können Sie einfach die wie so Asynchron-Eigenschaft des dem Tag verwenden:

<script src="jquery.min.js" async></script>

Lesen Sie mehr über asynchrones Laden bei https://css-tricks.com/thinking-async/

Wenn Sie andere Gründe haben js zu laden, nachdem ein bestimmtes Ereignis dann den folgenden Ansatz verwenden:

function loadJavaScript(url) 
{ 
    var s = document.createElement('script'); 
    s.setAttribute('src', url); 
    s.setAttribute('async',true); 
    document.head.appendChild(s); 
}

Sie die Adresse weitergeben können das Skript als loadJavaScript('https://ajax.googleapis.com/ajax/libs/dojo/1.12.2/dojo/dojo.js')

UPDATE

die onload-Handler Mit Hilfe einer Funktion aufzurufen, wenn die Skript Lasten:

$(document).ready(function() { 
 
\t $('#test').click(function() { 
 
    \t console.log("oO"); 
 
    loadCss('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'); 
 
    loadJavaScript('https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.js',function(){ 
 
    $('.selectpicker').selectpicker('refresh'); 
 
    }); 
 
    }); 
 
}); 
 

 

 
function loadCss(url,fn) { 
 
    var link = document.createElement("link"); 
 
    link.type = "text/css"; 
 
    link.rel = "stylesheet"; 
 
    link.href = url; 
 
    document.getElementsByTagName("head")[0].appendChild(link); 
 
} 
 

 
function loadJavaScript(url) 
 
{ 
 
    var s = document.createElement('script'); 
 
    s.setAttribute('src', url); 
 
    s.setAttribute('async',false); 
 
    if(typeof(fn) == "function") 
 
    { 
 
     fn(); 
 
    } 
 
    document.head.appendChild(s); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="test" type="button" class="btn btn-primary">Basic</button> 
 
<select class="selectpicker"> 
 
<option>1</option> 
 
</select>

Quelle

2017-04-04 12:43:44

Hey, danke für die schnelle Antwort, leider funktioniert das nicht für mich, ich habe einen kleinen Testfall: https://jsfiddle.net/uvyetrcb/1/ – marius

@marius Ich habe Ihr Anliegen, also in diesem Fall müssen Sie Verwenden Sie den Onload-Handler, damit ich die Antwort für Sie aktualisieren kann. –

@marius hoffe, das Update hilft Ihnen. –

Javascript laden externe Frameworks nach onReady

Antwort

Verwandte Themen