Tengo un proceso pesado que requiere varios segundos para completarse.
Es por eso que agregué una página de carga animada para que la espera sea aceptable.
<style> .modal_gif { display: none; position: fixed; z-index: 1000; top: 0; left: 0; height: 100%; width: 100%; background: rgba( 255, 255, 255, .8 ) url('static/loading.gif') 50% 50% no-repeat; background-size: 80%, auto; } body.loading .modal_gif { overflow: hidden; } body.loading .modal_gif { display: block; } </style> <script> $(document).on({ ajaxStart: function() { $body.addClass("loading"); }, ajaxStop: function() { $body.removeClass("loading"); } }); </script>Sin embargo, el gif pesa alrededor de 1 MB y no se muestra después de la primera solicitud: solo hay un velo semitransparente en la pantalla.
La segunda y siguientes solicitudes están funcionando bien, lo que me hace pensar que es un problema de carga de gif.
Me gustaría que el gif de carga animado se muestre siempre cuando se solicite, incluso para la primera solicitud.
¿Sabe cómo precargar un archivo animado gif como oculto y mostrarlo incluso para la primera solicitud?
Puede intentar precargarlo usando una etiqueta img ficticia (con visibilidad oculta, sin mostrar ninguna). Si estamos en eso, puedes en primer lugar:
.modal_gif { visibility: hidden; display: block; pointer-events: none; } body.loading .modal_gif { visibility: visible; overflow: hidden; } o incluso jugar con opacidad 0 u opacidad 1, la clave aquí es pointer-events: none; por lo que se puede hacer clic en la imagen.