Creación de un precargador JS completo para una aplicación AJAX. Precargador con porcentaje de carga ¿Qué es un precargador?

Hoy hablaremos sobre cómo ocultar la carga de un sitio de WordPress usando un precargador. Todos hemos visto sitios que muestran una imagen animada en lugar de una pantalla de carga blanca. Este pequeño truco puede ayudar si tiene un sitio que carga lentamente, pero aún desea disuadir a los usuarios impacientes a los que no les gusta mirar una pantalla en blanco durante demasiado tiempo. Bueno, vamos a agregar un precargador para un sitio de WordPress

Antes de comenzar a describir el complemento y cómo funciona, recomiendo . Solo en el caso de que todas estas recomendaciones no ayuden, entonces toda la esperanza es para el precargador y su impacto en la paciencia de los usuarios del sitio.

que es un precargador

Un precargador es un mecanismo para mostrar una animación o un indicador de carga antes de que una página web se procese por completo y se muestre en la pantalla. En otras palabras, mientras el navegador procesa y carga la página del sitio, se muestra una animación en la pantalla que reemplaza la pantalla en blanco.

Estoy en contra de esta herramienta, creo que es mejor optimizar la carga del sitio que instalar un precargador. Según tengo entendido, solo los grandes portales, las tiendas en línea y los servicios en línea con grandes bases de datos que procesan millones de datos y no pueden acelerar la descarga necesitan un precargador. Esta es mi opinión personal y puede que no estés de acuerdo conmigo.

Según las estadísticas, si el sitio se carga durante más de 4 segundos, existe una alta probabilidad de falla. El usuario puede abandonar el sitio sin esperar a que se cargue por completo, y esto es un indicador muy malo. Con una optimización normal, no es lo ideal, pero aún así, mi sitio se carga en 2-3 segundos y este indicador me conviene bastante, y como muestran las estadísticas de usuarios, también. Por lo tanto, una vez más digo que con una carga lenta del sitio, se necesita optimización y no un precargador.

Después de un breve prefacio, volvamos a nuestros "carneros". Instalar y configurar el complemento.

El complemento Preloader, descripción general y configuración

El complemento de precargador más adecuado y gratuito que encontré es un complemento con un nombre único: Precargador. Sí, así es, sin sorpresas. El caso es que cuando buscas un plugin en la biblioteca de wordpress.org, no lo encuentras. Debe escribir el precargador en la barra de búsqueda. Puede averiguar cómo instalar el complemento. Se parece a esto:

Después de la instalación, vaya a la pestaña Complementos / Precargador, desde este pequeño menú comienzan las configuraciones.

Entonces, todas las configuraciones en la lista corta:

• La primera línea de configuración es el color de fondo del precargador, por defecto es blanco (#FFFFFF). Puede configurar el parámetro que le interese.
• En segundo lugar, esta es la ubicación de la animación gif, se puede cambiar a cualquiera, solo debe tener en cuenta el tamaño de 128x128 píxeles. Puede descargar la animación que le interese utilizando el enlace proporcionado en la configuración.
• El siguiente paso es seleccionar los directorios donde se cargará el precargador. Puede instalar el cargador en categorías, en todo el sitio, en páginas de etiquetas individuales o solo en la página principal, usted decide.
• Lo último que debe hacer es abrir el archivo header.php en la carpeta de su tema activo y agregar el div sugerido () justo después de la etiqueta de apertura.
• Si el complemento está activo, entonces ya puede verificar que el complemento está funcionando.

También vale la pena señalar que al cambiar un GIF, su nombre debe ser precargador y solo debe haber una animación de este tipo en la carpeta del complemento de imagen.

Esto concluye esta humilde guía para usar el complemento Preloader para un sitio de WordPress, si tiene preguntas o problemas, escriba en los comentarios.

Luego, después de pensarlo un poco, decidí que necesitaba algo que ocultara la carga del sitio y mostrara algo a cambio, y cuando la página se cargue por completo, se mostrará al visitante en su totalidad. Después de buscar un poco lo que necesito, crucé varios scripts y agregué un poco mío en estilos, obtuve el resultado que necesitaba. Los visitantes de la página de destino ahora ven una pequeña pantalla de inicio antes de ver el contenido completamente cargado. El script funciona de tal manera que se carga en primer lugar y muestra lo que configuramos en la configuración, después de cargar la página, el navegador llama al evento window.onload y nuestro script muestra la página cargada.

Se parece a esto, cuanto más se cargue la página, más tiempo se mostrará la pantalla de inicio:

No es difícil conectar un precargador de este tipo a su sitio o página. Lo primero que debe hacer para implementar la idea es, por supuesto, insertar el marcado HTML. Puede hacer esto, por ejemplo, en el encabezado del sitio. Pegue en cualquier lugar, preferiblemente justo después de la etiqueta del cuerpo de apertura. Este es el bloque principal con el ID p_prldr, que llenará toda la pantalla y dentro del cual puedes colocar cualquier cosa que el visitante verá antes de que la página se cargue por completo. Dentro de este bloque colocaremos la animación y el texto de carga.

#p_prldr( posición: fija; izquierda: 0; arriba: 0; derecha: 0; abajo: 0; fondo: #9A12B3; índice z: 30;) .contpre small(font-size:25px;) .contpre( ancho : 250 px; altura: 100 px; posición: absoluta; izquierda: 50 %; superior: 48 %; margen izquierdo: -125 px; margen superior: -75 px; color: #fff; tamaño de fuente: 40 px; espaciado entre letras: -2px; text-align:center; line-height:35px;) #p_prldr .svg_anm (posición: absoluta; ancho: 41px; altura: 41px; fondo: url(images/oval.svg) centro centro sin repetición; fondo -tamaño:41px; margen: -16px 0 0 -16px;)

El bloque con clase svg_anm es nuestra animación. En mi precargador, uso gráficos SVG para la animación. Se puede escalar al tamaño que necesito y se ve realista y genial. Si quieres, puedes usar algunos animación gif o simplemente una imagen estática, todo depende de tu imaginación. Tengo este archivo oval.svg, configuré su tamaño con el parámetro background-size: 41px; , también debe especificar el ancho y la altura del bloque igual al tamaño de la animación. ancho: 41px altura: 41px;

Si también te gusta esta animación, puedes elegir entre las siguientes, para ello, haz clic derecho en la que necesites y guárdala en la carpeta deseada.

Bueno, las animaciones en sí.

El fondo de la animación se configura manualmente y lo tendrás como en el bloque principal del precargador, la animación en sí es blanca, por lo que si la abres después de descargarla, no verás nada 🙂 Para que no escribas después que no no funciona

Para que todo funcione, debe agregar el script del precargador, pero primero debe asegurarse de tener la biblioteca jQuery incluida. Si esto no se hace, agregue la siguiente línea al encabezado antes del encabezado de cierre o al pie de página antes del cuerpo de cierre:

Después de eso, insertamos el script en sí.

$(ventana).on("cargar", función () ( var $precargador = $("#p_prldr"), $svg_anm = $precargador.find(".svg_anm"); $svg_anm.fadeOut(); $precargador .delay(500).fadeOut("lento"); ));

Si no cambió la ID del bloque principal y la clase del bloque con animación, entonces no necesita cambiar nada en el script. Solo puede configurar una cosa, a saber, el retraso antes de mostrar la página. Cuando se carga la página, el bloque con animación desaparecerá y el contenido de la página aparecerá sin problemas, pero puede configurar otro retraso. En este script es igual a 500 milisegundos, es decir medio segundo, puedes reducirlo o por el contrario aumentarlo si lo necesitas.

Todo está hecho correctamente y el resultado debería complacerte. Lo principal es no apresurarse y seguir cuidadosamente las instrucciones.

Eso es todo, gracias por su atención. 🙂

Se ha puesto muy de moda la creación de precargadores, porque se ven hermosos, y lo más importante, obligan al usuario a no salir del sitio mientras aún se está cargando.

¿Cómo hacer un preloader para un sitio?

El precargador en sí se puede hacer en solo un par de segundos si usa soluciones llave en mano o en un par de minutos, si escribes todo tú mismo desde cero :)

Pero hagámoslo bien...

La esencia misma del navegador es que muestra el código en etapas. Esto significa que el navegador revisa todo el código de arriba a abajo y si en algún lugar en el medio del código encuentra scripts JS pesados, entonces el sitio se congelará un poco en este punto.

Preloader hace que ocultemos todo el contenido del sitio y solo lo mostremos completo cuando todo el sitio esté cargado con todos los scripts y estilos.

Breve esquema del precargador:

• Literalmente, justo después de la etiqueta del cuerpo de apertura, colocamos un div con un precargador;
• Encienda el precargador y oculte todo el contenido de la página;
• Después de cargar la página, elimine el precargador y muestre el sitio.

Ahora echemos un vistazo al código. Inicialmente, debe colocar un div con un precargador, algo como esto:

AreaForLoader (fondo: degradado lineal (90 grados, #FF4E50 10 %, #F9D423 90 %); desbordamiento: oculto; posición: fija; izquierda: 0; arriba: 0; derecha: 0; abajo: 0; índice z: 9999 ; )

Lo último que debe hacer es ocultar el precargador. Para hacer esto, puede usar el siguiente código jQuery:

$(ventana).on("cargar", función () ( $precargador = $(".loaderArea"), $cargador = $precargador.find(".cargador"); $cargador.fadeOut(); $precargador. retardo(350).fadeOut("lento"); ));

De hecho, todo lo que tiene que hacer es agregar una buena animación a sus precargadores. Además, encontré algunos ejemplos interesantes de precargadores, para que puedas echar un vistazo:

Crear un precargador usando complementos

También hay otras formas de crear precargadores y barras de carga. Por ejemplo, puede usar el complemento especial NProgress.js para crear una hermosa barra de carga, o puede usar el generador de precarga.

Solo estas dos cosas están bien descritas en el video tutorial sobre cómo crear un precargador, por lo que te aconsejo que veas este video tutorial:

Precargador $(documento).ready (función () ( NProgress.start (); NProgress.set (0.4); setTimeout(función () ( NProgress.done (); ), 4000); )); #hellopreloader>p(pantalla:ninguna;)#hellopreloader_preload(pantalla: bloque;posición: fija;índice z: 99999;superior: 0;izquierda: 0;ancho: 100%;alto: 100%;ancho mínimo: 1000px ;fondo: #E4F1FE url(http://hello-site.ru//main/images/preloads/circles.svg) center center no-repeat;background-size:131px;)

Hola Site.ru. Creador de sitios web gratuito.

var hellopreloader = document.getElementById("hellopreloader_preload"); function fadeOutnojquery(el)(el.style.opacity = 1;var interhellopreloader = setInterval(function()(el.style.opacity = el.style.opacity - 0.05;if (el.estilo.opacidad