Implementé mi sitio web en netlify, pero el sitio web solo muestra HTML hasta que termina de cargarse... ¿Algún consejo sobre cómo hacer que el sitio web solo se muestre una vez que se haya cargado por completo?
Hice mi propia animación de carga, pero no sé cómo seguir haciendo esto.
Así que escribí esto hace unas horas y luego los servidores se cayeron.
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>My Site</title> <style> .main { visibility: hidden } </style> <script> window.addEventListener("load", function() { document.getElementById("animation").style.display = "none"; document.getElementById("main").style.visibility = "visible"; }) </script> </head> <body> <div id="animation">img src="animated.gif" /></div> <div id="main"> Rest of the site </div> </body> </html>Usar ventana: cargar evento .
El evento de carga se activa cuando se ha cargado toda la página, incluidos todos los recursos dependientes, como hojas de estilo e imágenes.
Consulte el siguiente ejemplo como referencia.
<!DOCTYPE html> <html lang="en"> <head> <style> #loader { height: 100vh; width: 100%; background-color: black; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 999; } #loader img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 30%; } </style> <title>The Loader</title> </head> <body> <!-- Div for loader placement --> <div id="loader"> <img src="loader.gif" /> </div> <div> <span>We'll answer you soon!</span> </div> </section> <script> //hide the loader after page is loaded fully var loader = document.getElementById("loader"); window.addEventListener("load", function () { loader.style.height = "100%"; loader.style.width = "100%"; loader.style.borderRadius = "50%"; loader.style.visibility = "hidden"; }); </script> </body> </html>