Tengo un sitio web que tiene un botón de traducción. Cuando el usuario hace clic en él, uso document.getElementsByClassName.innerHTML para cambiar el idioma de todo el texto html.

Sin embargo, quiero que mi animación de carga se muestre después de que el usuario haga clic en traducir, hasta que todo el texto haya sido reemplazado y la fuente específica del idioma también se haya cargado.

¿Cómo podría esperar hasta que esto suceda antes de desactivar la visibilidad de mi animación de carga? Según tengo entendido, el DOM ya se ha cargado cuando el usuario hace clic en traducir.

Editar: debería haber agregado algo de código inicialmente. Aquí hay una pequeña muestra de lo que estoy haciendo:

índice.html

 <div> <h1 class="1.1.1">My website</h1> <h1 class="1.1.2">Text sample 1</h1> </div>

traducir.js

 function setEnglish() { document.getElementsByClassName("1.1.1")[0].innerHTML = "My website"; document.getElementsByClassName("1.1.2")[0].innerHTML = "Text sample 1"; } function setFrench() { document.getElementsByClassName("1.1.1")[0].innerHTML = "Mon site-web"; document.getElementsByClassName("1.1.2")[0].innerHTML = "Exemple de texte 1"; }

Hay un botón en index.html que, cuando se presiona, llama a una función de cambio de idioma (solo estoy cambiando entre dos idiomas). Uso lógica simple para cambiar entre los idiomas en translate.js.

Desafortunadamente, tengo que repetir la traducción al inglés (idioma principal) en translate.js aunque existe en el html, porque necesito volver al inglés desde el francés.

También tengo una fuente para la traducción al inglés y una fuente para la traducción al francés que se modifica en translate.js:

si el idioma es ingles:

 var body = document.getElementsByTagName('body')[0]; body.style.fontFamily = "font1";

si el idioma es francés:

 var body = document.getElementsByTagName('body')[0]; body.style.fontFamily = "font2";

El problema es que cuando el usuario hace clic en el botón, el texto se carga, pero el cambio de fuente se retrasa, por lo que el usuario ve el cambio de fuente.

Actualmente, tengo una animación de carga que se activa cada vez que el usuario hace clic en el botón de traducción, pero está configurado para durar un retraso de 500 ms (independientemente de la rapidez con la que se cargue la fuente). Después de que se acabe el tiempo, el gif de carga se oculta.

Quiero retrasar la ocultación de esta animación de carga hasta que la fuente y el texto terminen de cambiar del idioma anterior, en lugar de tener un retraso constante. A veces, la animación de carga caduca, luego la fuente cambia porque no se ha cargado lo suficientemente rápido. Espero que esto aclare las cosas.