javascript - 为什么悬停时图像偶尔会损坏

Question

$(function () {
    $(".btn").on("mouseover",function(){
        $(this).attr("src", $(this).attr("src").replace("images", "images/hover"));
    });

    $(".btn").on("mouseleave",function(){
        $(this).attr("src", $(this).attr("src").replace("images/hover", "images"));
    });
});

上面的代码是我在用户将鼠标悬停在按钮上时更改图像的方式，当用户单击它时，它将重定向到其他页面。 Html 元素如下:

<a href="product.php"><img class="btn" src="images/index_03.gif" /></a> 

问题是，我确定路径是正确的，但是当用户单击按钮时，在加载下一页时或在某些情况下，当我将鼠标悬停在图像上时，不会显示悬停图像但是链接断开了，为什么会这样以及如何修复？感谢您的帮助

Answer 1

$(this).attr("src", $(this).attr("src").replace("images/hover", "images"));

此代码将每次(或从缓存中)重新加载图像。

因此，在页面加载期间，由于其他数据也在同时加载，onhover 图像加载会很慢或损坏。

我建议您应该同时在同一位置加载两个图像，并在悬停时显示/隐藏它们以获得更快的结果。