悬停 BigCommerce 网站上的图像更改

Question

我为 BigCommerce 网站自定义了鼠标悬停时的图像更改。问题是，如果产品图片最初设置为 display:none，则一旦悬停启动，图片将不会加载。将鼠标悬停在产品上将说明我运行遇到的无限加载问题。

研究了 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 网站上的图像更改

Image Change on Hover BigCommerce Site

html

css

jquery

bigcommerce