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.