¿Hay alguna manera de ocultar un elemento y luego mostrar otro si la página tarda demasiado en cargarse por completo? Situación: tengo un encabezado con un video de fondo, y si alguien tiene una conexión lenta y el video de fondo no se puede cargar, reemplace el elemento del encabezado con otro encabezado que tenga una imagen de fondo estática.
Gracias
No es algo que normalmente recomendaría, pero aquí hay una solución bastante complicada.
const video = document.querySelector("#video-element-id"); let tooSlow = false; let timeout = setTimeout(() => { tooSlow = true; ...logic to change header clearTimeout(timeout); }, 1000); video.addEventListener('loadeddata', () => { console.log(tooSlow ? 'too slow' : 'loaded'); clearTimeout(timeout); });* EDITAR - o podrías hacer lo mismo con una promesa tbf
const video = document.querySelector("#video-element-id"); const loader = new Promise((resolve) => { let timeout = setTimeout(() => { resolve(false); }, 0); video.addEventListener('loadeddata', () => { resolve(true); }); }); loader .then((isLoaded) => { if (isLoaded) { console.log('loaded'); return; } console.log('too slow'); ...logic to change header }); Sin embargo, todavía existe el problema de que el video continuará descargándose incluso después de que se haya cambiado el encabezado. Una mejor solución podría ser usar el atributo poster para mostrar una imagen fija del video hasta que termine de cargarse :) https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#attr- póster