Tengo una superposición div que muestra un gif de carga. Cuando se carga la página, se supone que la superposición de div desaparece.

 <div id="posts"> <div id="loading" style="display: none;"> <img id="loading-image" src="/loading.gif" alt="Loading..."> </div> <div> ... </div> </div>

Para ocultar la superposición div, estaba usando:

 $(window).on('load', function () { // hide loading div $('#loading').hide(); })

En Chrome , si navego a algún enlace, luego navego "atrás", la superposición div de carga no se oculta. Solo se oculta cuando recargo la página.

Si agrego unload o beforeunload a la lista de eventos de jQuery, obtengo el comportamiento que deseo, pero la unload está obsoleta y beforeunload probablemente cause problemas de caché y problemas de rendimiento.

Según tengo entendido, un evento de load no se activa cuando un usuario presiona "atrás".

Pero quiero que la superposición div desaparezca cuando se carga la página O cuando el usuario vuelve a la página.

¿Cómo puedo lograr esto sin sufrir un impacto en el rendimiento?

DomContentLoaded con js regular.

 window.addEventListener('DOMContentLoaded', function() { let loading = document.querySelector('#loading'); loading.style.display = 'none'; console.log('Loaded'); })

Se imprime "Cargado" en la consola, pero la superposición tiene una etiqueta de estilo vacía, así:

 <div id="loading" style>...</div>

window.addEventListener('pageshow', function() {...} parece funcionar, pero no estoy seguro de si causará un impacto en el rendimiento o si es la mejor solución. Nunca lo usé antes.

¿Es esto una cosa de Chrome? ¿Hay alguna configuración de Chrome que deba mirar? Pruebo en MS Edge y Firefox y $('#loading').hide(); funciona bien en carga y navegación hacia atrás.

Versión de Chrome : versión 101.0.4951.67 (compilación oficial) (64 bits)

¡Incluso esto se registra en la consola pero no oculta el div en Chrome!

 $(document).ready(function () { $('#loading').hide(); console.log('Should be hidden?') })

Editar

De forma predeterminada, CSS muestra esta superposición con display: block; . Cuando se carga la página, configuro esta propiedad CSS en none para ocultarla.

 #loading { width: 100%; height: 100%; top: 0; left: 0; position: absolute; display: block; opacity: 0.7; background-color: #fff; z-index: 99; text-align: center; } #loading-image { position: fixed; top: 50%; left: 50%; z-index: 100; transform: translate(-50%, -50%); }