Question

我已经为BigCommerce网站自定义了悬停时的图片更改。问题是，如果最初将产品图片设置为显示：无，则启动悬停后就不会加载该图片。将鼠标悬停在产品上将说明我遇到的无尽负载问题。

在BigCommerce论坛和Stencil主题文档上进行了研究。

<div class="images">
    <a
      class="lazy-image replaced-image main {{image_ratio}} {{image_size}}"
      href="{{url}}"
      data-src="{{getImage img size (cdn default)}}">
      <img class="lazy-image main" data-src="{{getImage img size (cdn default)}}" alt="{{img.alt}}">
      <div class="spinner"></div>
    </a>
    {{#if product.images.[1]}}
    <a
      class="lazy-image replaced-image second {{image_ratio}} {{image_size}}"
      href="{{url}}"
      data-src="{{getImage product.images.[1] img size (cdn default)}}">
      <img class="lazy-image main" data-src="{{getImage product.images.[1] img size (cdn default)}}" alt="{{img.alt}}">
      <div class="spinner"></div>
    </a>
    {{else}}
    <a
      class="lazy-image replaced-image second {{image_ratio}} {{image_size}}"
      href="{{url}}"
      data-src="{{getImage img size (cdn default)}}">
      <img class="lazy-image main" data-src="{{getImage img size (cdn default)}}" alt="{{img.alt}}">
      <div class="spinner"></div>
    </a>
    {{/if}}
    </div>

我希望产品图片悬停在索引[0]和[1]之间。

Answer 1

我建议在单个图像标签上使用“ onmouseover”和“ onmouseout”事件，以在图像[1]和默认产品图像之间交换图像源：

<img class="card-image lazyload" onmouseover="this.src='{{getImage images.[1] img size (cdn default)}}'" onmouseout="this.src='{{getImage image 'productgallery_size' (cdn default)}}'" data-sizes="auto" src="{{cdn 'img/loading.svg'}}" data-src="{{getImage image 'productgallery_size' (cdn theme_settings.default_image_product)}}" alt="{{image.alt}}" title="{{image.alt}}">

悬停BigCommerce网站上的图片更改

1 个答案: