Estoy usando el siguiente código para recargar una hoja de estilo cuando el usuario hace una selección:
<link type="text/css" id="main_style" href="css/style.php" rel="stylesheet"> <button id="secret_1" style="display:none;"></button> $(document).ready(function(){ function freshStyle(stylesheet){ $('#main_style').attr('href',stylesheet); } $('#secret_1').click(function(event){ event.preventDefault(); var restyled = 'style.php?v='+Math.floor(Math.random() * 10000); freshStyle(restyled); }); });En Chrome, la recarga ocurre de manera fluida y las transiciones se ven geniales. En Firefox, el sitio web se convierte temporalmente en un desastre confuso (mientras se vuelve a cargar la hoja de estilo) durante un segundo antes de que se active la nueva hoja de estilo.
¿Es esto algo que se puede resolver con código, o es solo una característica del navegador Firefox?
Si carga la nueva hoja de estilo y elimina la anterior una vez que la nueva entre en vigor, el flash del formato sin estilo ya no debería ocurrir.
Nota: Eliminé jquery dentro de .ready ya que realmente no sé cómo hacer mucho de lo que está sucediendo aquí en jQuery - vanilla JS todo el camino para mí (pero puede convertir a jquery si te sientes más cómodo con eso)
$(document).ready(function() { function freshStyle(stylesheet) { const id = 'main_style'; const main = document.getElementById(id); const sibling = main.nextElementSibling; const parent = main.parentElement; const style = document.createElement('link'); style.rel = 'stylesheet'; style.href = stylesheet; style.onload = () => { // load fires BEFORE style is applied - so delay a tick setTimeout(() => { // remove the old stylesheet main.remove(); // set the id of the new sheet to the removed one style.id = id; }, 0); }; // this just ensures the new stylesheet ends up exactly where the old was parent.insertBefore(style, sibling); } document.getElementById('secret_1').addEventListener('click', (e) => { e.preventDefault(); const restyled = `style.php?v=${Math.floor(Math.random() * 10000)}`; freshStyle(restyled); }); });