Recientemente agregué en mi código algo como esto:
$(window).on('beforeunload', function () { $('.whirly-loader').show(); //SPINER })Entonces, cada vez que el usuario va a otro lado de mi web, aparece la flecha giratoria. Y funciona la mayor parte del tiempo. Pero, en alguna parte de la aplicación, el cliente comienza a ir hacia otro lado y el servidor responde con estos encabezados:
Cache-Control max-age=0, must-revalidate, private Connection Keep-Alive Content-Disposition attachment;filename=suministro.csv Content-Type text/csv; charset=utf-8 [...]Esto evita la recarga de la página y solo muestra la ventana para solicitar descargar o abrir el documento. Mi problema es que la rueda giratoria sigue apareciendo incluso si la página deja de cargarse
¿Cuál debería ser el evento para ocultar mi rueda giratoria incluso si la página no se vuelve a cargar debido a los encabezados?
;(function($, window, document){ $.fn.plgn = function() { //Start the loader when the event beforeunload $(window).on('beforeunload', function(event){ event.stopPropagation(); console.log("whirly-loader show"); //Hide the loader after 5 seconds if the page fails to load setTimeout(function(){ console.log("whirly-loader hide"); }, 5000); }); } })(jQuery, window, document); //Start the loader as soon as javascript loads console.log("whirly-loader show"); $( document ).ready(function() { //Hide the loader when the page is completely loaded console.log("whirly-loader hide"); $("body").plgn(); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="button" value = "Refresh page" onclick="window.location.reload();" />Tuvimos un problema similar y llegamos a la solución para hacer magia (en su caso, mostrar una ruleta) manualmente, como:
$('.js-show-spinner').addEventListener('click', event => { event.preventDefault(); $('.whirly-loader').show(); //SPINER }); <a href="https://google.com">google.com</a> <a class="js-show-spinner" href="/home">Home</a> <a href="SOME_DOC" download>some doc</a>Puede agregar un objetivo de atributos para los enlaces de descarga.
Ejemplo:
<body onbeforeunload="document.body.style.backgroundColor = 'red';"> <a href="output.zip" target="_blank">Download</a> </body> El atributo target="_blank" hará que el evento onbeforeload no se active.