Élimine le scintillement lors des événements de chargement de page lors de la modification d'éléments DOM existants

Question

J'ai la fonction de changement d'élément DOM suivante en utilisant du JavaScript simple, dans laquelle j'utilise l'événement de chargement de page pour modifier un élément span contenant une chaîne de texte du DOM.

En utilisant le code suivant, les éléments du DOM changeront comme prévu. Cependant, ils verront toujours la plus petite partie de desktop 和 mobile scintiller jusqu'à ce que l'élément DOM de la variable change.

Exemple de scène de scintillement :

• J'ai vu la plage de balises "Texte que je veux modifier" en une fraction de seconde.
• Une fois le contenu entièrement chargé, je vois la plage de balises modifiée "text1 modifié".

Je pense que cela se produit parce que les modifications DOM sont appliquées lorsque le contenu DOM de la page est entièrement chargé. Je souhaite masquer les éléments d'étiquette existants jusqu'à ce que les modifications soient appliquées, puis les afficher.

La structure des éléments de desktop 和 mobile que je souhaite exploiter est la suivante :

<span class="first-headline target-span">Text I want to change</span>

Voir les concepts suivants :

var changesObj = {
  "us": {
    title: "text1 changed"
  },
  "eu": {
    title: "text2 changed"
  }
};

function changes() {
  var webshop = changesObj[window.location.pathname.split('/')[1]];
  console.log(webshop);
  var changesText;
  if (!webshop) {
    console.log('webshop not found');
  }
  changesText = webshop.title;
  
  if (document.querySelector('.target-span').innerText.length > 0) {
    var desktop = document.querySelector('.target-span');
    console.log(desktop);
    desktop.innerText = changesText;
    console.log(desktop.innerText);
    console.log("applied changes for dekstop");
  }
  if (document.querySelector('.target-span').innerText.lenght > 0) {
    var mobile = document.querySelector('.target-span');
    mobile.innerText = changesText;
    console.log(mobile.innerText);
    console.log("applied changes for mobile");
  }
}

function invokeChanges() {
  document.addEventListener("DOMContentLoaded", function () {
    changes();
  });
}

invokeChanges();

Existe-t-il un moyen de masquer d'abord un élément DOM jusqu'à ce que les modifications apportées à l'élément existant soient appliquées, puis de l'afficher ?

Je pense utiliser des règles CSS en ligne comme celle-ci :

Paramètres.style.visbility='hidden'，当文本内容改变时用.style.visbility='visble'Affichage.

Mais je ne sais pas comment implémenter correctement cette solution dans mon code.

Answer 1

Il existe de nombreuses raisons pour lesquelles il peut scintiller, mais vous pouvez prendre deux précautions :

• Fonction Wrapper dans la balise de script <script defer> 上使用 defer，因为这可以让浏览器处理脚本的运行顺序，而不是使用 DOMContentLoaded。您还可以避免 changes.
• Suivez les conseils de cette question (et le raisonnement de votre propre question) pour ajouter un fichier CSS/CSS en ligne à la page pour rendre le texte invisible, puis marquez-le comme visible
• Vous pouvez également choisir de générer l'élément de manière dynamique si cela n'affecte pas trop la mise en page.

Mais , veuillez noter que indépendamment de l'un ou l'autre de ces éléments, ceux-ci nécessitent toujours l'exécution de JS, et il peut encore y avoir des retards. Si vous pouvez l'utiliser, vous pourriez être intéressé par le prérendude votre page - à partir de votre code JS, il recherche le nom de l'itinéraire (si c'est le cas eu 或 us), ce qui signifie que votre page est pré-rendu.

Answer 2

Dans tous les cas, vous devez attendre que le DOM soit chargé avant de pouvoir opérer dessus. Utiliser un nombre pair d'auditeurs DOMContentLoaded serait la voie à suivre. Il faut donc que trois choses se produisent :

1. En attente du chargement de DOM
2. Trouver des éléments et modifier le texte
3. Rendre l'élément visible. Vous pouvez utiliser l'attribut visibility:hidden 或 display:none。不同之处在于，使用 visibility:hidden et l'élément prendra toujours de la place. Le choix dépend donc du contexte.

Dans le premier exemple, j'ai ajouté un délai d'attente afin que vous puissiez voir à quoi ressemble la page avant que le texte ne change. J'ai également stylisé le <p> (display: inline-block) pour que vous puissiez voir la taille de la travée cachée.

window.location.hash = "us"; // for testing on SO
var changesObj = {
  "us": { title: "text1 changed" },
  "eu": { title: "text2 changed" }
};

function changes(e) {
  //let webshop = changesObj[window.location.pathname.split('/')[1]];
  let webshop = changesObj[window.location.hash.substring(1)]; // for testing on SO
  if (webshop) {
    [...document.querySelectorAll('.target-span')].forEach(span => {
      span.textContent = webshop.title;
      span.classList.add('show');
    });
  }
}

document.addEventListener('DOMContentLoaded', e => {
  setTimeout(changes, 1000);
});

p {
  border: thin solid black;
  display: inline-block;
}

.target-span {
  visibility: hidden;
}

.target-span.show {
  visibility: visible;
}

  Text I want to change


  Text I want to change