(Cuando la página web se carga, a veces el contenido es demasiado, y se ha cargado y esperando. En este momento, la página web muestra que el blanco no muestra nada. La experiencia del usuario es bastante mala. Por lo tanto, la forma de tira se muestra para los usuarios.
Las formas comunes son las siguientes:
1. La barra de progreso del temporizador (falso) <script type = text/javaScript> $ (function () {var loading = '<div class = loading> <div class = pic> </div> </div>'; $ (cuerpo). g) function () {$ (. Carga). 2. Contenido de adquisición real, date cuenta de la barra de progreso de cargaPara cargar la barra de progreso de acuerdo con el contenido real, se introducen dos puntos de conocimiento a continuación:
document.OnreadyStateChange Page Cargando el estado de los cambios en el evento
document.readyState Devuelve el estado del documento actual
1.
2. Carga -
3.
4. Completa -carga completa
2.1. Puede modificar el código del temporizador a: document.onreadyStateChange = function () {if (documeted.readyState == Complete) {$ (. Carga) .FadeOut ();}} 2.2. Muestra la pequeña animación de la barra de progreso en CSSSitio web recomendado: https://preloaders.net/ Este sitio web tiene varias pequeñas animaciones que indican la carga cargada
http://autoprefixer.github.io/ para agregar prefijos a CSS en línea
https://loading.io/ animación pequeña progresiva
2.3: El progreso se coloca en la cabeza, como se muestra a continuación:Nota: Esta realización no es la visualización real del progreso de la carga, sino que usa: el principio de ejecución del código de arriba a abajo
En diferentes posiciones del código, cambie el ancho de las líneas.
Como se muestra a continuación:
2.4 Obtenga la barra de progreso para cargar datos en tiempo realCrear objetos de imagen: Image Object Name = New Image ();
Uso: evento en línea
Nota: El atributo SRC debe escribirse detrás de la carga, de lo contrario, el programa cometerá un error en IE
Lo anterior es todo el contenido de este artículo.