Wp-rocket: Compatibilidad de bloques de imágenes de comparación de LazyLoad y JetPack

Creado en 3 dic. 2020  ·  4Comentarios  ·  Fuente: wp-media/wp-rocket

Antes de enviar un problema, verifique que haya completado los siguientes pasos:

  • Asegúrate de tener la última versión, sí
  • Usó la función de búsqueda para asegurarse de que el error no se haya informado antes, sí

Describe el error
Las imágenes no se muestran cuando se agregan con el bloque JetPack Compare Image.
El marcado está cortado, por lo que solo el svg de píxeles es visible cuando inspecciono el elemento, pero no la fuente de la imagen.
Capturas de pantalla:
Con LazyLoad deshabilitado: https://jmp.sh/O7wBHsF
Con LazyLoad habilitado: https://jmp.sh/ZOZZB7N

Reproducir
Pasos para reproducir el comportamiento:

  1. Crea una publicación con un bloque Comparar imagen.
  2. Habilitar LazyLoad en WP Rocket
  3. Abra la página y las imágenes no se muestran como en la captura de pantalla aquí: https://jmp.sh/RrOeolq

Comportamiento esperado
Las imágenes deben mostrarse como aquí: https://jmp.sh/14xZcAi

Solución actual
Excluya el nombre de la clase class="image-compare de la opción LazyLoad.
Bloquear el marcado en el código fuente antes de que se aplique LL: https://jmp.sh/HnYusFT

Contexto adicional
El bloque Compare funciona con JetPack lazy-load y con lazy-load del núcleo de WordPress porque las imágenes en realidad no se están cargando de forma diferida, es decir, excluidas.

Boleto relacionado: https://secure.helpscout.net/conversation/1351509800/217772/
Holgura: https://wp-media.slack.com/archives/G01BGNQU7AP/p1606920475010500

¿Posiblemente agregar esta exclusión de LazyLoad automáticamente sería una solución de nuestra parte?
¿O es necesario que JetPack realice la compatibilidad?

Preparación del backlog (solo para uso del equipo de desarrollo de WP Media)

  • [] Reproduce el problema
  • [] Identifique la causa raíz
  • [] Alcance una solución
  • [] Estima el esfuerzo
[XS] lazyload medium bug
Fuente
picture NataliaDrause

Comentario más útil

@arunbasillal Desde mi punto de vista, comenzaré el control de calidad en un par de minutos

picture piotrbak en 15 ene. 2021
🚀2

Todos 4 comentarios

Reproduce el problema ✅

Reproducido en el sitio de prueba local

Identifica la causa raíz ✅

El código generado a partir del propio complemento es correcto, como se puede ver en el código fuente:

<img id="1756" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20801%20801'%3E%3C/svg%3E" alt="" width="801" height="801" class="image-compare__image-before" data-lazy-src="https://tests.local/wp-content/uploads/2019/05/tshirt.jpg"/>
<noscript>
    <img id="1756" src="https://tests.local/wp-content/uploads/2019/05/tshirt.jpg" alt="" width="801" height="801" class="image-compare__image-before"/>
</noscript>
<img id="1757" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20801%20800'%3E%3C/svg%3E" alt="" width="801" height="800" class="image-compare__image-after" data-lazy-src="https://tests.local/wp-content/uploads/2019/05/vneck-tee.jpg"/>
<noscript>
    <img id="1757" src="https://tests.local/wp-content/uploads/2019/05/vneck-tee.jpg" alt="" width="801" height="800" class="image-compare__image-after"/>
</noscript>

El problema ocurre después de que se activa el script de comparación y no funciona correctamente con el marcado de carga diferida.

Alcance una solución ✅

Agregar image-compare__ a la exclusión en RocketLazyload\Images::getExcludedAttributes() excluirá esas imágenes de la carga diferida y resolverá el problema.

Estos datos de accesorios se pueden agregar a nuestras pruebas automatizadas para la validación y la prevención de regresiones.

Estima el esfuerzo ✅

Esfuerzo [XS]

Tabrisrp picture Tabrisrp en 17 dic. 2020

Relacionado: https://secure.helpscout.net/conversation/1372584429/224759/
agregar image-compare__ a la lista de exclusión resolvió el problema.

NataliaDrause picture NataliaDrause en 28 dic. 2020

@ engahmeds3ed @piotrbak ¿ Esto podría estar listo para 3.8.3 para su lanzamiento la próxima semana? ¿Debo actualizar el hito?

arunbasillal picture arunbasillal en 15 ene. 2021
👍1

@arunbasillal Desde mi punto de vista, comenzaré el control de calidad en un par de minutos

piotrbak picture piotrbak en 15 ene. 2021
🚀2
¿Fue útil esta página
0 / 5 - 0 calificaciones

Temas relacionados

engahmeds3ed picture engahmeds3ed  ·  4Comentarios
arunbasillal picture arunbasillal  ·  4Comentarios
webtrainingwheels picture webtrainingwheels  ·  5Comentarios
vmanthos picture vmanthos  ·  5Comentarios
vmanthos picture vmanthos  ·  3Comentarios