A veces, los usuarios quieren saber cómo reproducir GIF animados con un clic, consulta este artículo. Una imagen en formato de intercambio de gráficos (GIF) con más de una imagen o marco en un solo archivo se denomina GIF animado. Cada imagen o cuadro se describe mediante su propia extensión de control gráfico. Para mostrar la animación, los fotogramas se muestran en un orden determinado. Un GIF puede continuar en un bucle o detenerse después de algunos fotogramas.
El GIF animado es una extensión del estándar GIF. Te permite crear imágenes animadas colocando un montón de fotogramas en un solo archivo para que se puedan reproducir en orden. Incluso si hay varias imágenes en el mismo archivo, el tamaño del archivo se puede mantener pequeño debido a cómo se codifica el GIF y porque solo hay unos pocos colores para elegir.
Esto significa que la imagen no No tiene tantos detalles y no es tan claro como las imágenes en otros formatos. Los GIF animados son una forma rápida y fácil de mostrar contenido que cambia, especialmente en páginas web. El tamaño de sus archivos es pequeño en comparación con otras formas de crear contenido dinámico, como Java y Flash. Esto significa que el navegador puede descargarlos fácilmente, lo que hace que la navegación sea más rápida.
Cómo reproducir GIF animados al hacer clic
Cómo empezar
Comience por configurar las carpetas y los archivos del proyecto, que incluyen un HTML file, jQuery y un archivo JavaScript donde escribiremos nuestro código. Puede vincular jQuery a una red de entrega de contenido (CDN) o descargarlo y vincularlo al directorio de su proyecto. Te dejaríamos crear los estilos y CSS. Tenga en cuenta que el elemento img tiene un atributo adicional data-alt. Aquí es donde almacenamos el GIF, que usamos en lugar de la imagen estática que servimos primero. Con el elemento figcaption, puede agregar más imágenes y títulos para cada uno. Luego, escribiremos el código JavaScript que hará que suceda la magia. La idea es que cuando el usuario haga clic en la imagen, se cargue el GIF.
El JavaScript
Primero, creamos una función que obtendrá la ruta de la imagen GIF que colocamos en el atributo data-alt. Usaremos el método jQuery.data() para recorrer cada imagen en un ciclo: vargetGif=function() { vargif=[]; $(‘img’).each(function() { vardata=$(this).data(‘alt’); gif.push(data); }); devolver gif; } vargif=getGif(); Como se muestra arriba, ejecutamos la función y guardamos los resultados en una variable llamada gif. La ruta al GIF desde las imágenes en la página ahora está en la variable gif.
Precarga de imagen
Ahora tenemos un problema de carga: es posible que el GIF animado no se reproduzca de inmediato porque no ha terminado de cargarse (ya que el navegador necesitaría unos segundos para cargar completamente el GIF). ). Cuando el tamaño de la imagen GIF es grande, este retraso se sentiría más.
Necesitamos precargar o cargar los GIF simultáneamente mientras se carga la página.//Precarga todo el GIF. var imagen=[]; $.each(gif, función(índice) { imagen[índice]=nueva Imagen(); imagen[índice].src=gif[índice]; }); Ahora, abre las DevTools y ve a la pestaña Network or Resources. Aunque están guardados en el atributo data-alt, verás que los GIF ya están cargados.. Y el código que necesita para hacer eso está debajo. En el último fragmento de código, conectamos el evento de clic a cada elemento de figura que rodea la imagen. El código cambiará la fuente de la imagen entre el atributo src, donde se sirve la imagen estática, y el atributo data-alt, donde se sirve la imagen GIF al principio. Cuando el usuario hace clic dos veces,”deteniendo“la animación, el código también volverá a cambiar a la imagen fija. Así que eso es todo. Puede hacer que la página se vea mejor agregando estilos. Por ejemplo, puede colocar un botón de reproducción en la parte superior de la imagen para mostrar que se puede”reproducir“o puede agregar un GIF animado.
Preguntas frecuentes
¿Por qué no se reproducen los GIF cuando hago clic en ellos?
Debe abrir los archivos GIF animados en la ventana Vista previa/Propiedades antes de poder reproducirlos. Para hacer esto, elija el archivo GIF animado y luego haga clic en Ver > Vista previa/Propiedades en el menú Ver. Si el GIF animado no se reproduce, intente guardarlo nuevamente en la colección a la que desea agregarlo.
¿Cómo se reproduce un GIF animado?
Los GIF son fáciles de usar porque la mayoría de los principales programas de edición de imágenes y videos pueden abrirlos. Además, los navegadores web como Chrome, Firefox e Internet Explorer facilitan la apertura de archivos GIF. Para Internet Explorer, simplemente vaya al menú Archivo y luego haga clic en Abrir.
¿Cómo reproduce un GIF en diapositivas de clic?
Encuentre la ubicación del GIF animado que desea agregar , asegúrese de que el nombre del archivo termine en.gif, seleccione el archivo y luego haga clic en Insertar. Para reproducir la animación, vaya al menú Presentación de diapositivas y luego elija Reproducir desde la diapositiva actual.
¿Por qué mi GIF no se reproduce automáticamente?
¿Por qué Google Imágenes no reproduce los GIF? Los GIF animados no se reproducen en los resultados de búsqueda de Google Images en Google Chrome u otros navegadores porque no hay una opción integrada para hacerlo. Para reproducir un GIF animado, debe hacer clic en su imagen pequeña.