jquery - 悬停 BigCommerce 网站上的图像更改

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