¿Cómo funciona la carga diferida?
Una imagen HTML normal se ve así:
<img src="sample.jpg" width="100%"/>Los complementos de carga diferida reescriben el código de esta manera:
<img data-src="sample.jpg" width="100%"/>Como te diste cuenta,origenel atributo ha sido cambiado adata-src.
Porque noorigen, el navegador no carga inicialmente esta imagen. Más tarde, un pequeño código JavaScript verifica si la imagen está en la ventana gráfica (la ventana gráfica del usuario), y si está dentro,data-srcvuelve a esoorigenqué navegador activa la descarga y visualización de la imagen.
¿Qué es la carga diferida nativa?
Chrome viene con "carga diferida nativa". Usted puede leer sobre ello aquí.
La carga diferida nativa tiene la ventaja de que no hay necesidad de JavaScript y generalmente es mucho más rápido ya que el navegador lo hace "de forma nativa".
El código se ve así:
<img src="sample.jpg" loading="lazy" width="100%"/>¿Qué son las imágenes voladoras?
Flying Images es un complemento de carga diferida de alto rendimiento. Utiliza la carga diferida "nativa" del navegador si está disponible; de lo contrario, use JavaScript normal para la carga diferida.
Flying Images también puede cargar imágenes antes de que aparezcan en la ventana gráfica.
¿Tiene miedo de la carga diferida porque perjudica la experiencia del usuario?
¿En qué se diferencian las imágenes voladoras de otros complementos de carga diferida?
- Utiliza carga diferida incorporada - use la carga diferida integrada si está disponible (actualmente solo se admite en Chrome); de lo contrario, use JavaScript para cargar imágenes de forma diferida.
- Cargar imágenes antes de entrar en la ventana gráfica - mientras que otros complementos cargan imágenes cuando están "dentro" de la ventana gráfica, las imágenes voladoras las cargan cuando están a punto de ingresar a la ventana gráfica.
- Pequeño JavaScript - solo 0,5 KB, comprimido, reducido.
- Si lo desea, puede usar solo nativo – ¿Quieres admitir solo Chrome? Puede cambiar a "solo nativo", que no inyecta JavaScript.
- Reescribe todo el código HTML - Nunca te pierdas una imagen debido a la carga diferida (incluso si se agrega mediante complementos de la galería).
- Relleno transparente - Se agrega una pequeña base64 transparente a todas las imágenes. No más parpadeos al cargar imágenes.
- Excluir palabras clave - Casi todos los complementos de carga diferida brindan una función de exclusión, sin embargo, las imágenes voladoras también pueden excluir imágenes del nodo principal de la imagen. Útil si su imagen no tiene un nombre de clase.
- Admite navegadores con IE y JavaScript deshabilitados - todas las imágenes se cargan instantáneamente si es Internet Explorer o incluso si JavaScript está completamente deshabilitado (usando
sin guionetiqueta).
