Este artículo describe el efecto indicador de carga antes de cargar la página cargada por JS. Compártelo para su referencia, como sigue:
1. Código JS:
// Obtenga la altura y el ancho visibles de la página del navegador var _pageHeight = document.documentelement.clientHeight, _pagewidth = document.documentelement.clientwidth; // calcule la distancia entre el cuadro de carga desde la parte superior e izquierda (el ancho del cuadro de carga es 215px, la altura es 61px) var _cargingtaptope ? (_PageHeight - 61) / 2: 0, _loadingleft = _PageWidth> 215? (_PageWidth - 215)/2: 0; // Loadinghtml Contenido personalizado que se muestra antes de que la página no esté cargada var _LOADINGHTML = '<div id = "LoadingDiv" Style = "Posición: Absoluto; Izquierda: 0; VISIO: 100%; Altura:' + _PageHeight + + 'PX; Top: 0; Fondo:#F3F8ff; Opacidad: 0.8; Filtro: Alpha (Opacidad = 80); Padre-izquierda: 50px; El efecto se renderiza document.write (_loadinghtml); // window.onload = function () {// var LoadingMask = document.getElementById ('LoadingDiv'); // LoadingMask.ParentNode.remoVeChild (LoadingMask); //};/Escucha al cambio de estado de carga. El estado de carga es completo Función CompletLoading () {if (document.readyState == "Complete") {var LoadingMask = document.getElementById ('LoadingDiv'); loadingmask.parentnode.removechild (Loadingmask); }}2. Efecto:
ilustrar:
Simplemente coloque esta sección del código JS en <toad> al final;
El estilo del efecto de carga se puede modificar de acuerdo con su propio estilo. Debe encontrar la imagen de carga.gif usted mismo (muchos de ellos están disponibles en línea).
Haga clic aquí para descargar el código de instancia de demostración completo.
Para obtener más información sobre jQuery, los lectores interesados en este sitio pueden ver los temas: "Resumen de los efectos especiales clásicos comunes de jQuery", "Resumen de complementos y usos de JQuery de jQuery", Summary de JQuery Suplay Habilidades de JQuery "," Habilidades de extensión de JQuery Summary "," Summary Summary Summary "," Summary Summary Summary de JQuery Dragy Dragy Dragy Habilidades de JQuery. Efectos y técnicas especiales "," Resumen del uso de AJAX en jQuery "," Resumen de la animación de jQuery y el uso de efectos especiales "y" Resumen del uso del selector de jQuery "
Espero que este artículo sea útil para la programación jQuery de todos.