Maison > Article > interface Web > Quels sont les défauts de la méthode de chargement jquery ?

Quels sont les défauts de la méthode de chargement jquery ?

青灯夜游original: 2023-01-28 15:17:352712parcourir

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

Solution

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 07d10ca4e8a1a5f780c829e540938591init< avec l'identifiant de templateId L'élément ;/div> est chargé via le chargement

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 100db36a723c770d327fc0aef2ce13b1, 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 4750256ae76b6b9d804861d8f69e79d3< La fermeture html sera finalement générée. Elle ne sera peut-être pas récupérée la prochaine fois que le dom sera récupéré ici, car la structure d'origine a été détruite

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

À ce stade, nous pouvons la remplacer par

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

L'élément html généré. à ce moment, il ne sera pas utilisé comme nœud dom, mais sera inséré comme texte original du champ de texte, donc il n'y a pas de destruction du dom original. La valeur sera donc normale la prochaine fois

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

[Apprentissage recommandé. :

Tutoriel vidéo jQuery

Vidéo web front-end]

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment masquer le contenu CSS Div au-delàArticle suivant：Comment masquer le contenu CSS Div au-delà

Articles Liés

Voir plus