es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

¿Cómo puedo agregar “lazy loading” a esta imagen?

05 Aug, 2023 Programación

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>
Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    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 atributo class de la etiqueta img que deben eliminarse. El código correcto debería verse así:

    <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>

    Una vez que se eliminen las comillas, la funcionalidad de carga lenta debería funcionar para todas las imágenes en la página.

Comments are closed.