Défauts de la méthode de chargement jquery : 1. La méthode de chargement ignorera automatiquement les balises head, body et script ; 2. Le problème du décalage de la barre de défilement se produira après le chargement dynamique. 0);" peut être résolu ; 3. En raison du retard du réseau et d'autres problèmes, il n'est pas sûr du code à exécuter en premier ; 4. Il y a un problème de mise en cache ; 5. Il y aura des problèmes de dommages structurels.
L'environnement d'exploitation de ce tutoriel : système windows7, version jquery3.6, ordinateur Dell G3.
La méthode jquery load() peut nous aider à dupliquer les parties du document de la page, telles que la barre de titre et la partie d'informations inférieure. Nous pouvons extraire un modèle HTML puis le charger dynamiquement dans chaque page via la méthode de chargement. J'ai rencontré plusieurs problèmes lors de l'utilisation
Défaut 1 : La méthode de chargement ignorera automatiquement les balises head, body et script
1. Si vous souhaitez charger le contenu du document dans l'en-tête et le corps, vous peut utiliser Envelopper le contenu dans un div puis le charger
2 Nous pouvons créer et charger dynamiquement la partie script via la fonction de rappel de la méthode de chargement
3 Il n'est pas recommandé de charger dynamiquement la feuille de style, sinon le La page clignotera. Autrement dit, lorsque la page est actualisée, une image sans style de rendu apparaît pendant 1 seconde, puis revient à l'image normale (même raison que ci-dessous)
Défaut 2 : Le problème de la barre de défilement. le décalage se produira après le chargement dynamique
Actualiser la page. Décalage de la barre de défilement.
Dans des circonstances normales, nous placerons le fichier de script à la fin du corps du document pour empêcher js de bloquer le rendu du navigateur. Cela nous amène à exécuter notre méthode de chargement après le rendu de la page chargée dynamiquement. , la barre de défilement est fixée en haut depuis le début. Après avoir chargé dynamiquement la partie d'en-tête, la barre de défilement descendra et ne reviendra pas en haut
Ajouter $( dans la fonction de rappel du. load method document).scrollTop(0);
Ou utilisez l'attribut async de la balise script pour charger le script js de manière asynchrone, puis placez le script dans l'en-tête
Défaut 3 : Problème de chargement asynchrone
Étant donné que le chargement est déclenché de manière asynchrone, les deux lignes de code de la méthode suivante sont exécutées simultanément. En raison de retards du réseau et d'autres problèmes, il n'est pas certain quelle phrase sera exécutée en premier.
Et le
Si $("#templateId").html("hellow"); templateId") ne sera pas trouvé Inférieur à (le div n'a pas été chargé à ce moment), l'opération html ("hellow") ne sera pas réellement effectuée.
function load(targetId,templateName) {
$("#"+targetId).load(contextPath+templateName);
$("#templateId").html("hello");
}Défaut 4 : Problème de mise en cache
Parce que de nombreux navigateurs tentent de réduire la charge sur le serveur de requêtes, créent la même adresse de requête et optimisent les données historiques du cache local. Nous devons donc ajouter des suffixes dynamiques après l'adresse.
function load(targetId,templateName) {
var nowDate = new Date();
var randomId = nowDate.getTime();//防缓存
$("#"+targetId).load(contextPath+templateName+"?"+randomId);
}. Défaut 5 : Problème de dommages structurels
Dans le piège 1 (cache (problème), vous pouvez également rencontrer un problème plus profond, c'est-à-dire que si les données obtenues par chargement ne sont pas conformes à la spécification , elles seront détruites la structure du dom d'origine, entraînant une récupération ultérieure du dom et d'autres anomalies du nœud
Par exemple, si l'original
<html>
<head>
<title>test</title>
</head>
<body>
<textarea id="mytext"></textarea>
</body>
</html>si les données obtenues par chargement sont