Ich habe eine sehr große Javascript-Datei, die ich nur laden möchte, wenn der Benutzer auf eine bestimmte Schaltfläche klickt. Ich verwende jQuery als Framework. Gibt es eine integrierte Methode oder ein Plugin, die mir dabei helfen?
Noch ein paar Details: Ich habe eine Schaltfläche "Kommentar hinzufügen", die die TinyMCE-Javascript-Datei laden soll (ich habe das gesamte TinyMCE-Zeug auf eine einzige JS-Datei reduziert) und dann tinyMCE.init (...) aufruft.
Ich möchte dies nicht beim ersten Laden der Seite laden, da nicht jeder auf "Kommentar hinzufügen" klickt.
Ich verstehe, ich kann einfach:
$("#addComment").click(function(e) { document.write("<script...") });
Aber gibt es einen besseren / gekapselten Weg?
javascript
jquery
jquery-plugins
tinymce
lazy-loading
Jeff Fleischbällchen Yang
quelle
quelle
Antworten:
Ja, verwenden Sie getScript anstelle von document.write. Sobald die Datei geladen ist , ist sogar ein Rückruf möglich.
Möglicherweise möchten Sie jedoch überprüfen, ob TinyMCE definiert ist, bevor Sie es einschließen (für nachfolgende Aufrufe von 'Kommentar hinzufügen'), damit der Code möglicherweise folgendermaßen aussieht:
Vorausgesetzt, Sie müssen
init
es nur einmal aufrufen . Wenn nicht, können Sie es von hier herausfinden :)quelle
Mir ist klar, dass ich hier etwas spät dran bin (ungefähr 5 Jahre), aber ich denke, es gibt eine bessere Antwort als die akzeptierte wie folgt:
Die
getScript()
Funktion verhindert tatsächlich das Zwischenspeichern des Browsers . Wenn Sie eine Ablaufverfolgung ausführen, wird das Skript mit einer URL geladen, die einen Zeitstempelparameter enthält:Wenn ein Benutzer
#addComment
mehrmals auf den Link klickt ,tinymce.js
wird er von einer anderen URL mit Zeitstempel neu geladen. Dies macht den Zweck des Browser-Caching zunichte.===
Alternativ finden Sie in der
getScript()
Dokumentation einen Beispielcode, der zeigt, wie das Caching durch Erstellen einer benutzerdefiniertencachedScript()
Funktion wie folgt aktiviert wird :===
Wenn Sie das Caching global deaktivieren möchten, können Sie dies
ajaxSetup()
wie folgt tun :quelle
$.getScript({url: "test.js",cache:true})