Hover BigCommerce 网站上的图像更改答案

【问题标题】：Image Change on Hover BigCommerce SiteHover BigCommerce 网站上的图像更改
【发布时间】：2019-06-06 19:10:42
【问题描述】：

我为 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] 之间变化。

【问题讨论】：

你好，你能分享一下你的JS吗？
对不起，我不是故意的！
谢谢！我可能会建议以稍微不同的方式来解决这个问题。我将在下面的答案中详细说明，但如果需要用 jQuery 交换元素，请告诉我，我们可以从那里开始:)

标签： jquery html css bigcommerce

【解决方案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}}">

【讨论】：