图片悬停切换是许多网页交互中的基础功能，比如商品列表中的缩略图预览、菜单图标的状态切换、相册封面在鼠标移入时显示高亮版本。基于jQuery实现这类效果时，最直接的方式是在悬停事件里修改<img>标签的src属性。但直接改写src会带来一个常见问题：原始图片地址被覆盖后，如果要恢复，必须提前保存。若只在mouseleave里写死一个默认地址，一旦图片的初始地址发生变化，或者同一页面存在多个不同图片，恢复逻辑就会出错。本文围绕如何可靠地动态恢复图片原始src展开，给出几种可落地的优化方案。
一、直接修改src的隐患与状态丢失
先看一段很多旧项目中可能出现的代码：
$('.thumb').mouseenter(function () {
$(this).attr('src', 'images/active.jpg');
}).mouseleave(function () {
$(this).attr('src', 'images/default.jpg');
});
这种写法假设所有图片的默认地址都是images/default.jpg，一旦某个<img>标签初始src指向其他路径，鼠标移出后就被错误地替换成了统一默认图。更隐蔽的问题是，如果页面中存在懒加载或前端动态修改src的逻辑，原始的图片地址可能来自不同数据源，写死地址会造成状态混乱。此外，如果mouseenter时不做保存，而是在mouseleave中尝试通过某种规则推算原始地址，例如把文件名中的hover后缀去掉，也会在命名不规范时失败。
因此，恢复原始src的关键不是猜测，而是在修改之前把准确的原始值保存起来。jQuery提供的data方法很适合承担这个任务，因为它可以把数据挂在DOM元素上，不需要额外维护全局对象，也不会影响HTML结构。接下来的小节会展示如何基于data属性构建稳定的悬停切换逻辑。
二、基于data属性保存原始src的实现
最稳妥的做法是在第一次mouseenter时先检查原始地址是否已经保存，如果尚未保存，就用jQuery的data方法把当前src存为original-src。之后每次mouseleave都从这个缓存中恢复，而不是使用固定字符串。示例代码如下：
$('.hover-img').on('mouseenter', function () {
var $img = $(this);
if (!$img.data('original-src')) {
$img.data('original-src', $img.attr('src'));
}
var hoverSrc = $img.data('hover-src') || $img.attr('src').replace(/\.jpg$/i, '_hover.jpg');
$img.attr('src', hoverSrc);
}).on('mouseleave', function () {
var $img = $(this);
var originalSrc = $img.data('original-src');
if (originalSrc) {
$img.attr('src', originalSrc);
}
});
这段代码做了两件事：一是通过data缓存原始src，二是优先读取元素上的data-hover-src属性作为悬停图片地址，如果没有配置，则按规则把文件名中的.jpg替换为_hover.jpg。这样做的好处是，同一个绑定函数可以应用于多个图片，每个图片的原始地址互不干扰。即使在mouseenter中多次触发，data中已经存在original-src时不会重复覆盖，避免了因为异步加载或事件重复绑定导致原始地址被悬停地址污染。
需要注意，jQuery的data方法读取的是内存中的缓存，而attr('data-original-src')读取的是HTML属性。二者在字符串场景下差别不大，但如果原始src可能被其他插件动态修改，建议在修改src后同步清理或更新data缓存。例如某个图片在悬停前已经通过Ajax逻辑更换了真实图片，那么旧的original-src就不再准确。此时可以在更换src的代码中主动调用$img.removeData('original-src')，让下一次mouseenter重新保存最新地址。
三、动态加载内容和事件委托的适配
如果图片节点不是页面初始化时就存在，而是通过Ajax或模板动态插入，直接使用$('.hover-img').on(...)绑定的事件不会自动应用到新节点上。jQuery提供了事件委托机制，可以把监听器绑定到一直存在的父级容器上，通过选择器过滤触发目标。对于mouseenter和mouseleave，虽然它们本身不冒泡，但jQuery在委托模式下会做特殊处理，因此仍然可以使用。
$(document).on('mouseenter', '.hover-img', function () {
var $img = $(this);
if (!$img.data('original-src')) {
$img.data('original-src', $img.attr('src'));
}
var hoverSrc = $img.data('hover-src');
if (hoverSrc) {
$img.attr('src', hoverSrc);
}
}).on('mouseleave', '.hover-img', function () {
var $img = $(this);
var originalSrc = $img.data('original-src');
if (originalSrc) {
$img.attr('src', originalSrc);
}
});
上面把事件绑定到document上，过滤条件为.hover-img。这样即使图片是后续插入的，只要class匹配，就能触发悬停逻辑。不过在实际项目中，document委托虽然简单，但选择器匹配会发生在每次事件触发时，如果页面非常大、事件频繁，可能带来少量性能开销。更推荐将委托绑定到图片所在的最近静态容器上，例如列表的父元素#image-list，这样可以减少事件冒泡经过的层级和匹配范围。
另外，如果父容器本身也会动态重建，就需要继续向上找到稳定的根节点。事件委托的另一个好处是减少了事件处理函数的数量，不需要为每个图片单独绑定，这在大列表场景下能显著降低内存占用和初始化耗时。
四、预加载悬停图片与避免闪烁
在mouseenter时修改src会触发浏览器加载新图片，如果悬停图片体积较大或者网络较慢，用户会明显看到空白或加载延迟。即使鼠标移出后恢复原始图片，原始图片可能因为浏览器缓存机制重新请求，也可能出现闪烁。解决思路是在页面加载完成后提前加载所有可能用到的悬停图片，把它们缓存到内存中。
function preloadImages(srcList) {
srcList.forEach(function (src) {
var img = new Image();
img.src = src;
});
}
var hoverSrcs = [];
$('.hover-img').each(function () {
var hoverSrc = $(this).data('hover-src');
if (hoverSrc) {
hoverSrcs.push(hoverSrc);
}
});
preloadImages(hoverSrcs);
这段代码遍历所有.hover-img元素，收集data-hover-src地址并创建Image对象提前请求。浏览器会把加载过的图片放入缓存，之后mouseenter切换src时就能立即显示，不会出现明显延迟。如果悬停图片数量很多，建议只预加载首屏可见范围内的图片，避免一次性占用过多带宽。也可以结合用户行为预测，在鼠标靠近某个区域时再预加载对应图片。
还有一种思路是放弃修改src，改用CSS的background-image实现悬停切换。这种方式可以直接配合雪碧图或双背景图，浏览器在CSS规则变化时不会产生额外的img请求，且动画过渡更自然。但CSS方案无法完全替代<img>标签的语义，例如需要搜索引擎抓取原图、需要右键保存图片、或者图片尺寸由标签属性控制时，使用<img>标签加src切换仍然更合适。因此选择哪种方案要看具体业务需求。