Heim > Artikel > Web-Frontend > Was sind die Mängel in der JQuery-Lademethode?

Was sind die Mängel in der JQuery-Lademethode?

青灯夜游Original: 2023-01-28 15:17:352698Durchsuche

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 928da953796a077460e137b39a9c2d86init< mit der ID von templateId Das ;/div>-Element wird durch Load geladen. Wenn $("#templateId").html("hellow"); in der dritten Zeile dahinter zuerst ausgeführt wird, dann $( „#templateId“) wird nicht gefunden Weniger als (das div wurde zu diesem Zeitpunkt noch nicht geladen), der HTML-Vorgang („hellow“) wird nicht tatsächlich ausgeführt.

function load(targetId,templateName) {
    $("#"+targetId).load(contextPath+templateName);
    $("#templateId").html("hello");
}

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.

        function load(targetId,templateName) {
            var nowDate = new Date();
            var randomId = nowDate.getTime();//防缓存
            $("#"+targetId).load(contextPath+templateName+"?"+randomId);
        }

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

<html>
 <head>
  
  <title>test</title>
 </head>
 <body>
    <textarea id="mytext"></textarea>
 </body>
</html>

sind, sind sie

4750256ae76b6b9d804861d8f69e79d3<

Eventuell wird ein unregelmäßiger HTML-Abschluss generiert, der beim nächsten Abrufen des Doms nicht abgerufen wird, da die ursprüngliche Struktur zerstört wird Das Element wird zu diesem Zeitpunkt nicht als Dom-Knoten verwendet, sondern als Originaltext des Textfelds eingefügt, sodass kein Zerstöre den Original-Dom vorhanden ist. Der Wert wird also beim nächsten Mal normal sein

<html>
 <head>
  
  <title>test</title>
 </head>
 <body>
    <textarea id="mytext"><textarea><</textarea>
 </body>
</html>

[Empfohlen Lernen: jQuery-Video-Tutorial,

Web-Frontend-Video

]

Das obige ist der detaillierte Inhalt vonWas sind die Mängel in der JQuery-Lademethode?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So verbergen Sie CSS-Div-Inhalte darüber hinausNächster Artikel：So verbergen Sie CSS-Div-Inhalte darüber hinaus

In Verbindung stehende Artikel

Mehr sehen