Establezca el estilo de la imagen, coloque la imagen de la barra de progreso en el directorio imágenes/ y asígnele el nombre loading.gif. Entre ellos, la imagen de carga gif se puede generar en https://icons8.com/preloaders/ , como se muestra en la siguiente figura.
Agrega un archivo de estilo al encabezado para que la imagen esté en el centro de la pantalla.
<style>
.loading{width:100%;height:100%;position:fixed;top:0;left:0;z-index:100;background:#ffffff;opacity:0.5;}
.loading .pic{width:64px;height:64px;background:url(images/loading.gif);position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;}
</style>Agregue una etiqueta div al cuerpo para mostrar imágenes.
<div class="loading">
<div class="pic"></div>
</div>Determine el estado de carga actual a través de document.readyState en el evento document.onreadystatechange.
<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script>
document.onreadystatechange=function(){
if(document.readyState=="complete"){
$(".loading").fadeOut();
}
}
</script>Entre ellos, document.readyState tiene cuatro estados.
no inicializado |
Cargando no iniciado |
cargando |
cargando |
interactivo |
El documento está cargado, pero es posible que aún se estén cargando recursos como imágenes y estilos. En este punto el documento ya puede interactuar con el usuario. |
completo |
Carga completa |