Al implementar la interacción de datos con el fondo, a menudo nos encontramos con una situación como esta:
1. Debe usar un ajax para solicitar datos de fondo y, para mostrar la página después de obtener los datos, debe usar la sincronización ( async:false ) en este momento.
2. Sin embargo, habrá otra situación en este momento. Cuando la solicitud ajax lleva mucho tiempo, se necesita una capa de carga para mostrar el estado de espera.
3. En este momento, beforeSend no tiene efecto, incluso si el código de carga se escribe antes de ajax.
4. La razón es que cuando async de ajax se establece en falso, el subproceso de representación (IU) del navegador y el subproceso js se excluyen mutuamente, y la representación de la página se bloqueará al ejecutar operaciones js que consumen mucho tiempo. No hay ningún problema cuando realizamos ajax asíncrono, pero cuando se establece en una solicitud síncrona, se detendrán otras acciones (el código detrás de la función ajax, así como el hilo de renderizado). Incluso si mi declaración de operación DOM es anterior a la solicitud, esta solicitud síncrona bloqueará "rápidamente" el subproceso de la interfaz de usuario y no le dará tiempo para ejecutarse. Es por eso que el código no funciona.
5. Solución (nota: se implementa bajo asíncrono): como se muestra en la figura
El efecto de carga se puede lograr usando imágenes gif. Por supuesto, en el lado móvil, la animación CSS3 es una mejor opción. Aquí hay una dirección de demostración: http://cssload.net/
Por ejemplo, aquí elijo dicho efecto y luego hago clic en el botón OBTENER CÓDIGO para obtener el código:
#fuenteG { posición : relativa ; margen : 10% automático ; ancho : 240px ; altura : 29px } .fountainG { posición : absoluta ; superior : 0 ; color de fondo : #33cc99 ; ancho : 29px ; altura : 29px ; -webkit-animation : bounce_fountainG 1.3s infinito normal ; -moz-animación : bounce_fountainG 1.3s infinito normal ; -o-animation : bounce_fountainG 1.3s infinito normal ; -ms-animation : bounce_fountainG 1.3s infinito normal ; animación : bounce_fountainG 1.3s infinito normal ; -moz-transformar : escala (.3) ; -webkit-transformar : escala (.3) ; -ms-transformar : escala (.3) ; -o-transformar : escala (.3) ; transformar : escala (.3) ; borde-radio : 19px ; } #fuenteG_1 { izquierda : 0 ; -moz-animación-retraso : 0,52 s ; -webkit-animación-retraso : 0,52 s ; -ms-retraso de animación : 0,52 s ; -o-retraso de animación : 0,52 s ; animación-retraso : 0,52 s ; } #fountainG_2 { izquierda : 30px ; -moz-animación-retraso : 0,65 s ; -webkit-animación-retraso : 0,65 s ; -ms-animación-retraso : 0,65 s ; -o-retraso de animación : 0,65 s ; animación-retraso : 0,65 s ; } #fountainG_3 { izquierda : 60px ; -moz-animación-retraso : 0,78 s ; -webkit-animación-retraso : 0,78 s ; -ms-animación-retraso : 0,78 s ; -o-retraso de animación : 0,78 s ; animación-retraso : 0.78s ; } #fountainG_4 { izquierda : 90px ; -moz-animación-retraso : 0,91 s ; -webkit-animación-retraso : 0,91 s ; -ms-retraso de animación : 0,91 s ; -o-retraso de animación : 0,91 s ; animación-retraso : 0,91 s ; } #fountainG_5 { izquierda : 120px ; -moz-animación-retraso : 1.04s ; -webkit-animación-retraso : 1.04s ; -ms-retraso de animación : 1,04 s ; -o-retraso de animación : 1,04 s ; animación-retraso : 1.04s ; } #fountainG_6 { izquierda : 150px ; -moz-animación-retraso : 1,17 s ; -webkit-animación-retraso : 1,17 s ; -ms-animación-retraso : 1,17 s ; -o-retraso de animación : 1,17 s ; animación-retraso : 1.17s ; } #fountainG_7 { izquierda : 180px ; -moz-animación-retraso : 1.3s ; -webkit-animación-retraso : 1.3s ; -ms-animación-retraso : 1,3 s ; -o-retraso de animación : 1,3 s ; animación-retraso : 1.3s ; } #fountainG_8 { izquierda : 210px ; -moz-animación-retraso : 1,43 s ; -webkit-animación-retraso : 1,43 s ; -ms-retraso de animación : 1,43 s ; -o-retraso de animación : 1,43 s ; animación-retraso : 1.43s ; } @-moz-keyframes bounce_fountainG { 0%{ -moz-transform : escala(1) ; color de fondo : #33cc99 ; } 100% { -moz-transform : scale(.3) ; color de fondo : #0099cc ; } } @-webkit-keyframes bounce_fountainG { 0%{ -webkit-transform : scale(1) ; color de fondo : #33cc99 ; } 100% { -webkit-transform : scale(.3) ; color de fondo : #0099cc ; } } @-ms-keyframes bounce_fountainG { 0%{ -ms-transform : scale(1) ; color de fondo : #33cc99 ; } 100% { -ms-transform : scale(.3) ; color de fondo : #0099cc ; } } @-o-keyframes bounce_fountainG { 0%{ -o-transform : scale(1) ; color de fondo : #33cc99 ; } 100% { -o-transformar : escala(.3) ; color de fondo : #0099cc ; } } @keyframes bounce_fountainG { 0%{ transformar : escala(1) ; color de fondo : #33cc99 ; } 100% { transformar : escala(.3) ; color de fondo : #0099cc ; } }
También contiene la estructura html:
<div id="fountainG"> <div id="fountainG_1" class="fountainG"> </div> <div id="fountainG_2" class="fountainG"> </div> <div id="fountainG_3" class="fountainG"> </div> <div id="fountainG_4" class="fountainG"> </div> <div id="fountainG_5" class="fountainG"> </div> <div id="fountainG_6" class="fountainG"> </div> <div id="fountainG_7" class="fountainG"> </div> <div id="fountainG_8" class="fountainG"> </div> </div>
最后，将html结构放在比如文章列表或者其他需要Ajax请求加载的地方，然后使用JQuery来实现最终的效果：
function loadingEffect() { var loading = $('#fountainG' ); cargando.hide(); $(documento).ajaxStart( function () { loading.show(); }).ajaxStop( function () { loading.hide(); }); } efecto de carga();