Mängel der JQuery-Lademethode: 1. Die Lademethode ignoriert automatisch die Head-, Body- und Script-Tags. 2. Das Problem des Scrollbar-Offsets tritt nach dem dynamischen Laden auf. Fügen Sie einfach „$( document).scrollTop(“ hinzu. 0);“ kann gelöst werden; 3. Aufgrund von Netzwerkverzögerungen und anderen Problemen ist nicht sicher, welcher Code zuerst ausgeführt werden soll; 4. Es liegt ein Caching-Problem vor; 5. Es wird Probleme mit strukturellen Schäden geben.
Die Betriebsumgebung dieses Tutorials: Windows7-System, JQuery3.6-Version, Dell G3-Computer.
Die jquery-load()-Methode kann uns dabei helfen, Dokumentteile der Seite zu duplizieren, z. B. die Titelleiste und den unteren Informationsteil. Wir können eine HTML-Vorlage extrahieren und sie dann über die Lademethode dynamisch in jede Seite laden. Bei der Verwendung sind mehrere Probleme aufgetreten
Fehler 1: Die Lademethode ignoriert automatisch die Head-, Body- und Script-Tags
1 Wenn Sie den Dokumentinhalt in Head und Body laden möchten, müssen Sie Sie können den Inhalt in ein Div einschließen und ihn dann laden
2. Wir können den Skriptteil dynamisch über die Rückruffunktion der Lademethode erstellen und laden
3. Es wird nicht empfohlen, das Stylesheet dynamisch zu laden Die Seite blinkt. Das heißt, wenn die Seite aktualisiert wird, erscheint 1 Sekunde lang ein Bild ohne Rendering-Stil und kehrt dann zum normalen Bild zurück (gleicher Grund wie unten). Fehler 2: Das Problem mit der Bildlaufleiste Der Offset tritt nach dem dynamischen Laden auf
Seite aktualisieren. Versatz der Bildlaufleiste. Unter normalen Umständen platzieren wir die Skriptdatei am Ende des Dokumentkörpers, um zu verhindern, dass js das Rendern des Browsers blockiert. Dies führt dazu, dass wir unsere Lademethode ausführen, nachdem die Seite zuletzt gerendert wurde , die Bildlaufleiste ist von Anfang an oben fixiert. Nach dem dynamischen Laden des Kopfteils geht die Bildlaufleiste nach unten und kehrt nicht nach oben zurück
Lösung
Fügen Sie $( in der Rückruffunktion hinzu Methode laden document).scrollTop(0);Oder verwenden Sie das asynchrone Attribut des Skript-Tags, um das JS-Skript asynchron zu laden, und platzieren Sie das Skript dann im Kopf
Fehler 3: Problem beim asynchronen Laden
Da das Laden asynchron ausgelöst wird, werden die beiden Codezeilen in der folgenden Methode alle gleichzeitig ausgeführt. Aufgrund von Netzwerkverzögerungen und anderen Problemen ist nicht sicher, welcher Satz zuerst ausgeführt wird.Und die Defekt 4: Caching-Problem Da viele Browser versuchen, die Belastung des Anforderungsservers zu reduzieren, die gleiche Anforderungsadresse erstellt und die historischen Daten aus dem lokalen Cache optimiert haben, müssen wir nach der Adresse einige dynamische Suffixe hinzufügen. Defekt 5: Strukturelles Schadensproblem In Falle 1 (Cache (Problem)) können Sie auch auf ein tieferes Problem stoßen, d zerstört die ursprüngliche Dom-Struktur, was zum anschließenden Abrufen von Dom und anderen Knotenausnahmen führt. Wenn beispielsweise die ursprünglichen Daten function load(targetId,templateName) {
$("#"+targetId).load(contextPath+templateName);
$("#templateId").html("hello");
} function load(targetId,templateName) {
var nowDate = new Date();
var randomId = nowDate.getTime();//防缓存
$("#"+targetId).load(contextPath+templateName+"?"+randomId);
}<html>
<head>
<title>test</title>
</head>
<body>
<textarea id="mytext"></textarea>
</body>
</html>
