¿Cómo puedo agregar “lazy loading” a esta imagen?
Deseo agregar carga perezosa a las imágenes en mi página web, sin embargo, he estado teniendo algunos problemas. He estado utilizando esta guía: (https://speedboostr.com/shopify-lazy-loading/). Hasta ahora he hecho todo correctamente y algunas imágenes han estado funcionando excepto por el siguiente código:
<div class="product-item {{ variant.id }}">
<div class="product-item__thumb">
{%- if product.images.size > 1 -%}
<a href="{{ product.url | within: collection }}">
<img class="thumb-primary popup_cart_image" "lazyload"="" src="{{ product.featured_image.src | img_url: 'grande' }}" alt="{{ product.featured_image.alt }}">
{%- for image in product.images limit: 1 offset: 1 -%}
<img class="thumb-secondary popup_cart_image" "lazyload"="" src="{{ image.src | img_url: 'grande' }}" alt="{{ product.featured_image.alt }}">
{%- endfor -%}
</a>
{%- else -%}
<a href="{{ product.url | within: collection }}">
<img class="popup_cart_image" "lazyload"="" src="{{ product.featured_image.src | img_url: 'grande' }}" alt="{{ product.featured_image.alt }}">
</a>
{%- endif -%}
</div>
</div>
davy.ai
Parece que el problema puede ser un error tipográfico en el código. Hay comillas adicionales después de
popup_cart_image"
en el atributoclass
de la etiquetaimg
que deben eliminarse. El código correcto debería verse así:Una vez que se eliminen las comillas, la funcionalidad de carga lenta debería funcionar para todas las imágenes en la página.