Jquery - 仅当存在新图像时才会更改鼠标悬停图像

Question

我创建了一种简单的方法，将鼠标悬停在图片上，将我们的产品图片更改为次要图片。

当您将鼠标悬停在图像之外时，它会切换回原始图像。

包含“-1.jpg”的文件是原始图像，“-3.jpg”是次要图像。所以代码将图像 src 从 -1 切换到 -3 很简单。

我的问题是某些产品没有辅助图像，当将鼠标悬停在这些图像上时，当前会出现可见错误。

我正在尝试在我的代码中添加一种在更改图像之前检查辅助图像是否存在的方法。如果不存在次映像，则不会发生任何事情。如果确实存在，则将换入次要图像。

附上我的代码和测试jsfiddle。

$(function() {
    $("[src*='-1.jpg']")
.mouseover(function() { 
            var src = $(this).attr("src").replace("-1.jpg", "-3.jpg");
            $(this).attr("src", src);
})
.mouseout(function() {
            var src = $(this).attr("src").replace("-3.jpg", "-1.jpg");
            $(this).attr("src", src);
        });
});

谢谢！

Answer 1

您将不得不尝试加载所有这些“辅助图像”。

如果图像加载到临时变量中...它存在。因此，将一个类添加到 item 以使 hover 处理程序仅适用于那些已成功加载辅助图像的图像。

现在...由于所有这些load 事件都需要一些时间，因此您必须使用delegated event handler... 就像动态添加图像一样。

不错的“副作用”是所有这些次要图像都将在浏览器中“预加载”...所以您的图像交换应该没有加载延迟。 一颗子弹两个目标！

$(function() {

  // Check if -3.jpg exist for each image
  // If so, add a class
  $("[src*='-1.jpg']").each(function(index,item){
    let temp_img = $(`<img src="${item.src.replace("-1.jpg", "-3.jpg")}">`);
    temp_img.on("load", function(){
      $(item).addClass("hasSecondaryImage")
    })
  })
  

  // Delegated "hover" handler
  $(document).on("mouseover mouseleave", ".hasSecondaryImage", fonction(e){
    if (e.type === "mouseover"){
      var src = $(this).attr("src").replace("-1.jpg", "-3.jpg");
      $(this).attr("src", src);
    }
    if (e.type === "mouseleave"){
      var src = $(this).attr("src").replace("-3.jpg", "-1.jpg");
      $(this).attr("src", src);
    }
  })
  
})