Ich habe die folgende Funktion zum Ändern von DOM-Elementen mit einfachem JavaScript, bei der ich das Seitenladeereignis verwende, um ein Span-Element zu ändern, das eine Textzeichenfolge des DOM enthält.

Mit dem folgenden Code ändern sich die DOM-Elemente wie erwartet. Sie werden jedoch immer noch den kleinsten Teil des desktop 和 mobile Flackerns sehen, bis sich das DOM-Element der Variablen ändert.

Flicker-Szenenbeispiel:

• Ich habe den Tag-Bereich „Text, den ich ändern möchte“ im Bruchteil einer Sekunde gesehen.
• Nachdem der Inhalt vollständig geladen ist, sehe ich den geänderten Tag-Bereich „text1 geändert“.

Ich denke, das passiert, weil DOM-Änderungen angewendet werden, wenn der DOM-Inhalt der Seite vollständig geladen ist. Ich möchte vorhandene Beschriftungselemente ausblenden, bis Änderungen angewendet werden, und sie dann anzeigen.

Die Elementstruktur von desktop 和 mobile, die ich bedienen möchte, ist wie folgt:

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

Siehe die folgenden Konzepte:

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();

Gibt es eine Möglichkeit, ein DOM-Element zunächst auszublenden, bis Änderungen am vorhandenen Element vorgenommen werden, und es dann anzuzeigen?

Ich denke darüber nach, Inline-CSS-Regeln wie diese zu verwenden:

Einstellungen.style.visbility='hidden'，当文本内容改变时用.style.visbility='visble'Anzeige.

Aber ich bin mir nicht sicher, wie ich diese Lösung richtig in meinem Code implementieren soll.