Tengo una página que tiene que hacer bastante trabajo (5-6 segundos) para cargar datos de todas partes en la conexión inicial. Es lento debido a los puntos finales de API a los que llamo, no tengo control sobre eso.
¿Hay alguna manera de mostrar un div de carga antes de que comience a recopilar todos los datos?
Lo siguiente no hace nada. Creo que es porque la página ya comienza a recopilar datos antes de llegar a jquery. Podría estar equivocado. myjs.js es el nombre del archivo y es lo primero que se carga en mi página.
$('body').on('load', function(){ $body.addClass("loading"); });y hace lo mismo
$(document).ready(function() { $body.addClass("loading"); });En términos sencillos:
Esto está en el marco de laravel si eso afecta algo.
En realidad, hay una manera bastante simple de hacer esto. Recientemente experimenté algo similar.
Hice algo como esto:
window.addEventListener('load', (event) => { setTimeout(() => { $('.jumping-dots-loader').slideUp(650); }, 1000); }); .jumping-dots-loader { width: 100vw !important; height: 100vh !important; background-color: white; z-index: 99999999999999999999999; display: block; border: none; border-radius: 0; margin: 0; position: fixed; padding: 20% 35%; text-align: center; } .jumping-dots-loader span { display: inline-block; width: 20px; height: 20px; border-radius: 100%; background-color: rgba(147, 194, 61, 1); margin: 35px 0.85rem; } /* Add in animation */ <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="jumping-dots-loader"> <span></span> <span></span> <span></span> </div> <h1> Howsit going? </h1> Si revisa los documentos de Mozilla sobre el evento document.readystatechange , verá cómo el navegador maneja el orden de carga y puede usar esto para su ventaja. En mi ejemplo, agrego un contenedor div que cubrirá la ventana gráfica del usuario. Luego diseñe algunos puntos (agregue su propia animación) que se mostrarán mientras se carga el documento. Cuando se alcanza el estado de load , el marcador de posición div se ocultará y se mostrará la página cargada.