Cómo hacer un precargador de GIF con retraso. Creamos un precargador JS completo para una aplicación AJAX. Etapas de la creación de un precargador.
Crear precargadores se ha puesto muy de moda porque se ven bonitos y, lo más importante, obligan al usuario a no abandonar el sitio mientras aún se está cargando.
¿Cómo hacer un precargador para un sitio web?El precargador en sí se puede crear en solo un par de segundos si usa soluciones ya preparadas, o en un par de minutos si escribe todo usted mismo desde cero :)
Pero pongamos las cosas en orden...
La esencia misma del navegador es que muestra el código paso a paso. 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, el sitio se congelará un poco en este punto.
Preloader hace que ocultemos todo el contenido del sitio y lo mostremos por completo solo cuando todo el sitio esté cargado con todos los scripts y estilos.
Breve diagrama de cómo funciona el precargador:
- Literalmente, inmediatamente después de la etiqueta del cuerpo de apertura, colocamos un div con un precargador;
- Habilite 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 veamos el código. Inicialmente necesitas colocar un div con un precargador, algo como esto:
AreaForLoader (fondo: gradiente 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 debes hacer es ocultar el precargador. Para hacer esto, puedes usar el siguiente código jQuery:
$(ventana).on("cargar", función () ( $preloader = $(".loaderArea"), $loader = $preloader.find(".loader"); $loader.fadeOut(); $preloader. retraso(350).fadeOut("lento"); ));
Básicamente, todo lo que tienes que hacer es agregar una animación agradable a tus precargadores. Además, encontré algunos ejemplos interesantes de precargadores, por lo que quizás quieras consultarlos:
Creando un precargador usando complementosTambién hay otras formas de crear precargadores y barras de carga. Por ejemplo, puede utilizar el complemento especial NProgress.js para crear una hermosa barra de carga o utilizar el diseñador de precargador.
Estas dos cosas están perfectamente descritas en el vídeo tutorial sobre cómo crear un precargador, así que te aconsejo que veas este vídeo tutorial:
Precargador $(documento).ready(función () ( NProgress.start (); NProgress.set (0.4); setTimeout(función () ( NProgress.done (); ), 4000); )); #hellopreloader>p(display:none;)#hellopreloader_preload(display: block;posición: fija;índice z: 99999;arriba: 0;izquierda: 0;ancho: 100%;alto: 100%;ancho mínimo: 1000px ;fondo: #E4F1FE url(http://hello-site.ru//main/images/preloads/circles.svg) centro centro no-repetir;fondo-tamaño:131px;)
Hola-site.ru. Creador de sitios web gratuito.
var hellopreloader = document.getElementById("hellopreloader_preload");función fadeOutnojquery(el)(el.style.opacity = 1;var interhellopreloader = setInterval(function())(el.style.opacity = el.style.opacity - 0.05; if (el.estilo.opacidad2. Cree estilos CSS para el bloque div y el elemento i (icono).
#before-load ( posición: fija; /*posición fija del bloque*/ izquierda: 0; /*posición del elemento de la izquierda*/ arriba: 0; /*posición del elemento de arriba*/ derecha: 0 ; /*posición del elemento en la derecha*/ bottom : 0; /*posición del elemento en la parte inferior*/ background: #fff; /*color del fondo del bloque*/ z-index: 1001; / *colocarlo encima de todos los elementos de la página*/ ) #antes de cargar i ( tamaño de fuente : 70px; /*tamaño del icono*/ posición: absoluta; /*posición absoluta, posicionada en relación con su ancestro más cercano*/ izquierda: 50 %; /*izquierda 50% del ancho del bloque principal*/ top: 50%; /*superior 50 % de la altura del bloque principal*/ margin: -35px 0 0 -35px; /*desplazar el icono para que esté centrado*/ ) 3. Agregue un script que oculte el precargador después de que se carga la página (es decir, cuando se carga el objeto de la ventana): $(window).load(function() ( $("#before-load"). find("i").fadeOut().end().delay(400).fadeOut("lento"); ));
Si desea utilizar una imagen gif animada como indicador del precargador, debe realizar los siguientes cambios en los pasos anteriores:
Elimine las clases Font Awesome del código HTML:
Realice los siguientes cambios en los estilos CSS (cambie la regla #before-load i (..)):
#before-load i ( ancho: 70px; /*ancho de la imagen gif*/ alto: 70px; /*alto de la imagen gif*/ posición: absoluta; izquierda: 50%; arriba: 50%; fondo: url( "assets /images/img.gif") sin repetición 50% 50%; /*ubicación (url) de la imagen gif y otros parámetros*/ margen: -35px 0 0 -35px; )
Puede descargar imágenes gif animadas para su sitio web desde el recurso http://preloaders.net/ o utilizar este archivo.
Utilizar o no un precargador en un sitio web es una cuestión individual. Por ejemplo, para un sitio web de una sola página con una cantidad mínima de gráficos e imágenes, tal cosa no es necesaria.
Consideremos el otro extremo: un sitio web para pedir pizza. La mayoría de los visitantes piden pizza desde un teléfono móvil, lo que significa, en principio, una velocidad de carga del sitio más lenta y, además, fotos. Un precargador para dichos sitios será muy útil; los visitantes no verán el desagradable proceso de formación de la página.
Ahora crearemos un precargador giratorio clásico en CSS puro usando propiedades de animación.
Creemos un código HTML simple que consista en una etiqueta div vacía con la clase de cargador, sin contar la etiqueta del cuerpo, por supuesto.
Escribiremos el resto del código en el archivo de estilos. El comienzo le recordará una lección de geometría escolar: conocer las formas.
Estilos para la clase de cargador.Primero, dibuja un cuadrado gris con una línea continua de 2 píxeles de grosor:
Cargador (
borde: 2px sólido #eae4ea;
}
con ancho y alto de 150 píxeles:
Cargador (
ancho: 150 px;
altura: 150 px;
}
Con sólo una línea de código, el cuadrado se convirtió en un círculo:
Radio fronterizo: 50%;
Crea una sombra translúcida para el círculo:
Sombra de cuadro: 0 -2px 2px rgba(0,0,0,.2);
Y pintemos el marco inferior de verde:
Borde inferior: 2px sólido #6ddfca;
Pensemos en nuestro propio nombre para la animación; el círculo hará una revolución completa de manera uniforme en 3 segundos, girando sin cesar hasta que se cargue la página.
Animación: cargador 3s lineal infinito;
Un círculo es bueno, pero tres círculos son mejores, especialmente porque dos de ellos serán "falsos", solo en estilos, ya que los pseudoelementos brindan esta oportunidad.
Dibuja un pseudocírculo interno antes del círculo real, 20 píxeles (10 px + 10 px) más pequeño en diámetro.
Cargador:antes (
contenido: "";
posición: absoluta;
arriba: 10px;
izquierda: 10px;
abajo: 10px;
derecha: 10px;
}
con un marco inferior rosa y girará más rápido que el círculo principal.
Cargador:antes (
borde inferior: 2px sólido #d355be;
animación: cargador 2s lineal infinito;
}
Ahora le toca al círculo de atrás, aunque es el más pequeño es el más rápido, en 1 segundo dará una vuelta completa y tiene una hermosa raya morada.
Cargador:después (
borde inferior: 2px sólido #8c23ec;
animación: cargador 1s lineal infinito;
}
La sangría del círculo posterior al círculo principal es de 22 píxeles.
Arriba: 22px;
izquierda: 22px;
abajo: 22px;
derecha: 22px;
Es hora de comenzar nuestros círculos, esto se hace mediante la propiedad transformar: rotar, que significa rotación. 0% es el comienzo y 100% es el final. Cada círculo girará 360 grados.
Muchos programadores optimizan el código JavaScript y CSS para que la página se cargue más rápido.
Pero no todos fabrican precargadores que le dan al usuario el efecto de una carga subjetivamente más rápida.
Método número 1. Barato y alegre.
La idea es simple: debes colocar una imagen en el centro que le muestre al usuario que la página aún se está cargando. El código es bastante sencillo, escribimos inmediatamente después:
Como resultado, inmediatamente después de la carga, aparece un bloque con una barra de progreso animada en el centro de la página. Es necesario cambiar el parámetro de desbordamiento para que no aparezca una barra de desplazamiento y el usuario no pueda desplazarse hacia abajo y mirar el contenido de la página.
Luego, cuando todo se haya cargado, deberá quitar el precargador y configurar el desbordamiento como visible.
Coloqué esta parte del código en un archivo con funciones JS, plreloader1.js
Si crea una barra de progreso a partir de una imagen GIF animada, puede resultar demasiado pesada, a veces incluso más grande que la propia página donde se encuentra.
Por lo tanto, es mejor dibujar una tira (por ejemplo, como esta), ponerla como fondo del bloque con el precargador de ID y mover la posición del fondo según el temporizador.
Y después de cargar hacemos esto:
Se puede ver el resultado del trabajo.
Este método tiene desventajas: si configura la ocultación del precargador para que se cargue, es decir, cuando espera hasta que se carguen todas las imágenes, el usuario puede pensar que la página simplemente está congelada; de hecho, no sucede nada más que animación. Si lo cuelga en $(document).ready() de jQuery, después de que desaparezca el precargador, las imágenes solo se cargarán.
Por lo que se sugiere utilizar...
Método número 2. La verdad está ahí fuera, o los Jedi contraatacarán.
Primero, dibujemos 2 barras de carga: activa y no muy activa.
Configuremos el inactivo como fondo y hagamos que el activo sea el fondo del div, para lo cual cambiaremos el ancho dependiendo del porcentaje de carga.
Progbar_ph.gif es una imagen de 1 píxel de alto y el ancho de nuestra barra de desplazamiento (este ejemplo tiene errores sin él en IE, y todavía no he encontrado otra forma de centrar los divs de la barra de progreso).
Los estilos son los mismos que en el método anterior, excepto que
Ahora todo lo que queda es crear un pequeño script que cargará dinámicamente el contenido y las imágenes del sitio. Es necesario para que la barra de progreso se muestre y cambie incluso antes de que se descarguen el marco utilizado y otros archivos JS.
Tomemos un sitio web promedio creado completamente en AJAX. La carga es aproximadamente así:
- El código HTML se está cargando.
- las imágenes están empezando a cargarse
- entonces algún marco
- archivos JS adicionales (aunque es mejor fusionar todo en uno)
- Se lanza una determinada función (o varias) que incorpora contenido adicional.
Implementé 2 métodos: el primero es simple y se enciende así:
justo antes de escribir:
dLoader.start("progbarfg", 333, "cuenta");
El primer parámetro es el identificador del bloque con la barra de carga activa como fondo, el segundo es el ancho de la imagen, el tercer parámetro es el método mediante el cual calcularemos el peso del contenido.
El script escanea todas las imágenes en las páginas y les asigna un peso de 1. Todos los archivos JS están escritos en su cuerpo, como le diré a continuación.
Sin embargo, me gustaría que el peso de cada contenido fuera no solo uno, sino un volumen real en bytes. Y para aplicaciones AJAX, me gustaría cargar todos los gráficos a la vez.
Para hacer esto, escribí un script en PHP que escanea una carpeta con imágenes de diseño y coloca todo el conjunto con los tamaños de archivo en una matriz, comprimiéndolo opcionalmente.
Entonces, al agregar lo siguiente frente a nosotros, obtendremos una barra de progreso que mostrará el progreso de la carga de todo el contenido en la página, después de lo cual desaparecerá suavemente.
Cuando se han cargado todos los archivos JS, se inician las funciones que están en la matriz de invocación. Si cargamos contenido usando jQuery, la función se verá así:
El script PHP hace lo siguiente: ingresa en una matriz los scripts necesarios con sus tamaños, así como imágenes y funciones adicionales. Código:
Después de que se hayan cargado todas las imágenes y archivos JS, se llama al evento onLoad, que usted especificó en la función dLoader.start()
También hay una forma de personalizar el proceso de carga.
En esta lección veremos cómo hacer el porcentaje de carga del precargador con elementos en la página. Aquí trabajaremos con jQuery, nos familiarizaremos con sus métodos, aprenderemos cómo funcionan los ciclos y crearemos nuestra propia función que realizará determinadas acciones.
Etapas de la creación de un precargador.Obtengamos el número total de imágenes en la página, averigüemos el porcentaje, cuánto se asigna a cada imagen, llenemos la barra de progreso en un bucle hasta que todas las imágenes aparezcan en la página y finalmente, con una carga del 100%, mostremos el total. página y ocultar el precargador.
Este será el concepto general de este script.
Transfiramos todos los archivos a nuestro entorno de desarrollo, iniciemos Index, abramos la consola del navegador y veamos cómo se cargan las imágenes, con y sin el almacenamiento en caché habilitado.
Cuando el almacenamiento en caché está desactivado, recibimos imágenes, pero la barra de progreso sigue funcionando. Si aceleramos en 3G, entonces todo cambia aquí, las imágenes aún no se han cargado todas, pero la barra de progreso está 100% llena y espera hasta que se carga la página.
El motivo de esto es el tiempo de carga del precargador y el porcentaje que configuramos manualmente, tenemos que trabajar con estos parámetros.
Dado que cambiaremos la lógica del script, no necesitamos llamarlo en la parte inferior, porque la barra de progreso ahora debería cargarse primero, movemos todas las conexiones de archivos al encabezado.
Inicializando variables
Volvemos al script e inicializamos varias variables en la parte superior.
Movemos la variable preloader = $("#preloader") a la parte superior, con la ayuda de la cual ocultamos este identificador. Lo usaremos un poco más tarde.
Precargador = $("#preloader"), // selector de precargador
El resto del código se puede comentar o eliminar; ya no lo necesitaremos.
// $(ventana).on("cargar", función () ( // $preloader.delay(1800).fadeOut("lento"); // ));
Usamos la biblioteca jQuery para acceder a objetos de imagen. Usemos la función de longitud para averiguar la cantidad de imágenes en la página y coloquemos el resultado resultante en la variable imagesCount.
ImagesCount = $("img").length, // número de imágenes
A continuación comprobaremos y mostraremos este resultado en la consola.
Console.log(imágenesCount);
Y ahora sabemos cuántas imágenes gráficas hay en la página. A continuación, puede calcular la cantidad de porcentajes asignados a una imagen.
Dividimos 100 por el número de imágenes y ponemos el resultado resultante en una variable. Para comprobarlo, lo mostraremos inmediatamente en la consola.
Porcentaje = 100 / recuento de imágenes; //cantidad % por imagen console.log(percent);
Ahora conocemos el parámetro de porcentaje de carga, cuánto progreso debemos completar al ejecutar el script y cuánto porcentaje se asigna a cada imagen.
Al llamar a la función en los parámetros coloca 100, registramos una variable con el número de porcentajes por imagen y cambiamos la velocidad de carga a 1000 para que la barra de progreso cargue más rápido los porcentajes iniciales.
)).circularProgress("animate", porcentaje, 1000);
Clonación de imágenes en bucleAhora la siguiente tarea es crear una copia de cada imagen, donde con cada clon llamamos a la función de iniciar la barra de progreso, y durante la llamada lanzamos la barra de progreso, en la que cargamos el porcentaje asignado a ella en cada imagen. , completando así completamente el progreso hasta el punto final.
Para hacer esto, creamos un bucle, donde I es una variable de contador, luego escribimos una condición, mientras I sea menor que el número de imágenes, aumentaremos el contador en una var i = 0; i< imagesCount; i++ , и в скобках выполнять следующие действия.
Creamos una variable en la que colocamos una instancia del objeto Imagen (es decir, una imagen), luego hacemos una copia de src.
El navegador le permite realizar un seguimiento de la carga de recursos externos (scripts, imágenes mediante un evento) si se produce un error durante la carga.
La siguiente línea llama a la función usando el evento onload, en el cual se inicia la barra de progreso; lo describiremos un poco más adelante.
Y en la segunda línea llamamos al evento onerror, si de repente ocurre un error: la imagen no se carga.
Para (var i = 0; i< imagesCount; i++){ // создаем клон изображений var img_copy = new Image(); img_copy.src = document.images[i].src; img_copy.onload = img_load; img_copy.onerror = img_load; }
A continuación describimos una función que inicia el precargador y agrega un porcentaje, escriba la función img_load() dentro para agregar el porcentaje que conocemos al progreso de carga. Para hacer esto, cree otra variable con valor cero, llámela progreso.
Progreso = 0; // punto de partida
Y luego creamos otra variable llamada LoadedImg con un valor cero. También será un contador mediante el cual compararemos con el número de imágenes clonadas.
LoadedImg = 0, // contador de carga de imágenes
Volvemos a la función, hacemos las sumas progresan += por ciento en la nutria, y guardamos el resultado en progreso. En la segunda línea, aumentamos el contador de LoadImg++ en uno.
A continuación, escribimos una condición, si el progreso es mayor o igual a 100 (donde 100 es el número total de porcentaje) o el contador de LoadedImg es igual al número de imágenes cargadas ImagesCount, entonces puede eliminar la barra de progreso preloader.delay (400).fadeOut("lento"); , de lo contrario llamamos a la barra de progreso, donde aumentamos el progreso y reducimos la velocidad de carga a 500.
Función img_load() ( progreso += porcentaje; cargadoImg++; if (progreso >= 100 || cargadoImg == imágenesCount)( preloader.delay(400).fadeOut("lento"); qBody.css("desbordamiento", "" ); ) $(".dws-progress-bar").circularProgress("animate", progreso, 500); )
Usando la consola, verifiquemos cómo se crean nuevos objetos de imagen.
Consola.log(img_copy); console.log(img_copy.src);
Vemos que se han creado con éxito cinco clones de imágenes, cada uno tiene un enlace, no hay errores, la función se procesó con éxito.
Quitar un precargadorAhora eliminemos el desplazamiento derecho hacia abajo, para que al cargar el precargador no podamos desplazarnos por la página, como lo hacemos ahora.
Para hacer esto, envolveremos todo en una condición: si el número de imágenes es mayor que cero, imagesCount > 0, ejecutaremos este script; de lo contrario, eliminaremos el precargador preloader.remove(); . Si se cumple la condición, agregue un fondo negro al precargador preloader.css("background", "#000"); , y en css eliminaremos este estilo.
If (imagesCount >= imgSum && imagesCount > 0) ( preloader.css("fondo", "#000"); ) else ( preloader.remove(); )
Inicializamos otra variable en la que colocamos el selector qBody = $("body") , y en la condición especificamos un bloqueo de desplazamiento para el selector de cuerpo qBody.css("overflow", "hidden"); .
QBody.css("desbordado", "oculto");
Ahora necesitamos desbloquear el desplazamiento, para esto, cuando eliminamos el precargador, para el cuerpo limpiamos el bloqueo qBody.css("overflow", ""); .
QBody.css("desbordamiento", "");
Eliminamos la salida de información del servicio en la consola y guardamos.
En principio el preloader está listo, pero no siempre nos resultará interesante ejecutarlo con una o dos imágenes en la página. Para no volver a llamarlo, agreguemos una variable, llamémosla imgSum y pongamos en ella el valor imgSum = 3; .
Agreguemos a la condición que si el número de imágenes es mayor o igual a nuestra variable (imagesCount >= imgSum && imagesCount > 0), entonces cumplimos la condición, de lo contrario eliminamos el precargador. Así, usando esta variable imgSum, podemos configurar la carga del precargador para una cierta cantidad de imágenes.
Cuando la barra de progreso funciona rápidamente, nuestro porcentaje salta más allá de 100, arreglemos esto de inmediato. Abra el archivo plugin.js, busque en él dónde se forma el porcentaje y primero agregue la siguiente condición, verifique el valor del porcentaje, si es mayor que 100, luego devuelva 100; de lo contrario, déjelo sin cambios.
global_settings.percent = (global_settings.percent > 100)? 100: configuración_global.porcentaje;
Agreguemos algunas imágenes más, veamos cómo se comportará el precargador con una gran cantidad de ellas y, al mismo tiempo, verifiquemos configuraciones adicionales.
Con esta nota concluyo la lección, si te interesó, asegúrate de compartirla con tus amigos.
La lección fue preparada por Denis Gorelov.
Objetos básicos y técnicas de gestión de WINDOWS.
Hacer un precargador JS completo para una aplicación AJAX
Relevancia: ¿qué es en palabras simples?
El teléfono no ve la tarjeta de memoria, ¿qué debo hacer?
Servicio para comprobar una empresa y su reputación Cómo comprobar la reputación
El vendedor solicita cerrar la disputa en Aliexpress: ¿qué hacer?
¿Qué es Paypal y cómo usarlo?