Hilangkan kelipan semasa acara pemuatan halaman apabila mengubah suai elemen DOM sedia ada

Question

Saya mempunyai fungsi menukar elemen DOM berikut menggunakan JavaScript biasa, di mana saya menggunakan acara pemuatan halaman untuk menukar elemen span yang mengandungi beberapa rentetan teks DOM.

Menggunakan kod berikut, elemen DOM akan berubah seperti yang dijangkakan. Walau bagaimanapun, mereka masih akan melihat bahagian terkecil desktop 和 mobile berkelip sehingga elemen DOM pembolehubah berubah.

Contoh adegan kelipan:

• Saya melihat julat tag "Teks yang saya mahu tukar" dalam sepersekian saat.
• Selepas kandungan dimuatkan sepenuhnya, saya melihat julat tag yang diubah "teks1 ditukar".

Saya rasa ini berlaku kerana perubahan DOM digunakan apabila kandungan DOM halaman dimuatkan sepenuhnya. Saya mahu menyembunyikan elemen label sedia ada sehingga perubahan digunakan dan kemudian menunjukkannya.

Struktur elemen desktop 和 mobile yang saya ingin kendalikan adalah seperti berikut:

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

Lihat konsep berikut:

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

Adakah terdapat cara untuk menyembunyikan elemen DOM dahulu sehingga perubahan pada elemen sedia ada digunakan, dan kemudian menunjukkannya?

Saya sedang berfikir untuk menggunakan peraturan CSS sebaris seperti ini:

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

Tetapi saya tidak pasti bagaimana untuk melaksanakan penyelesaian ini dengan betul dalam kod saya.

Answer 1

Terdapat banyak sebab mengapa ia mungkin berkelip, tetapi terdapat dua langkah berjaga-jaga yang boleh anda ambil:

• Fungsi pembalut dalam tag skrip <script defer> 上使用 defer，因为这可以让浏览器处理脚本的运行顺序，而不是使用 DOMContentLoaded。您还可以避免 changes.
• Mengikuti nasihat soalan ini (dan alasan soalan anda sendiri) untuk menambahkan fail CSS/CSS sebaris ke halaman untuk menetapkan teks kepada tidak kelihatan, kemudian tandakannya sebagai kelihatan
• Anda juga boleh memilih untuk menjana elemen secara dinamik jika ia tidak menjejaskan reka letak halaman terlalu banyak.

Tetapi , sila ambil perhatian bahawa tanpa mengira salah satu daripada ini, ini masih memerlukan JS untuk dilaksanakan dan mungkin masih terdapat kelewatan. Jika anda boleh menggunakannya, anda mungkin berminat untuk prapaparanhalaman anda - daripada kod JS anda, ia mencari nama laluan (jika ia eu 或 us), yang bermaksud halaman anda boleh diprapaparkan.

Answer 2

Dalam apa jua keadaan, anda perlu menunggu sehingga DOM dimuatkan sebelum anda boleh mengendalikannya. Menggunakan bilangan pendengar genap DOMContentLoaded akan menjadi cara untuk pergi. Jadi, tiga perkara perlu berlaku:

1. Menunggu DOM dimuatkan
2. Cari elemen dan tukar teks
3. Jadikan elemen kelihatan. Anda boleh menggunakan atribut visibility:hidden 或 display:none。不同之处在于，使用 visibility:hidden dan elemen itu masih akan mengambil ruang. Oleh itu, pilihan bergantung pada konteks.

Dalam contoh pertama, saya menambahkan tamat masa supaya anda boleh melihat rupa halaman sebelum teks berubah. Saya juga menggayakan <p> (display: inline-block) supaya anda boleh melihat saiz span yang tersembunyi.

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