Respondiendo a una petición de un alumno, hoy he hecho un tutorial en el que muestro cómo mostrar un icono de precarga que será visible durante la carga del contenido de la página.
Cuando esta carga haya concluído, este icono desaparecerá y en su lugar se verá la página web.
Este video corresponde a la sección de lecciones adicionales del curso de diseño de páginas web con HTML5 y CSS disponible en esta web.
Ponlo en práctica con el código fuente que he usado en el video.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#precarga{
margin: 30vh auto 0 auto;
display: block;
}
.container{
opacity: 0;
transition: 1s;
}
</style>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script>
$(window).on("load", function(){
$(".container").css("opacity",1)
$("#precarga").css("display", "none");
});
</script>
</head>
<body>
<img id="precarga" src="index.svg" alt="">
<div class="container">bhjfhajsdbfhjabs
<img src="https://img.elo7.com.br/product/original/121820A/topos-de-bolo-safari-elefante-decoracoes.jpg" alt="">
<img src="https://fido.palermo.edu/servicios_dyc/encuentro2010/administracion-concursos/archivos_2015/30222_99376_30322.jpg" alt="">
</div>
</body>
</html>