如何防止 img.src 被重复设置

本文介绍在鼠标移动事件中动态切换预览图片时，如何避免重复为 元素设置相同 src，从而防止不必要的资源加载和潜在的闪烁问题。核心方法是通过比对当前 img.src 与目标 URL 是否一致来实现条件赋值。

本文介绍在鼠标移动事件中动态切换预览图片时，如何避免重复为 `` 元素设置相同 `src`，从而防止不必要的资源加载和潜在的闪烁问题。核心方法是通过比对当前 `img.src` 与目标 URL 是否一致来实现条件赋值。

看你现在这段代码，onMove 事件会在每一帧都被触发，特别是鼠标快速移入按钮区域时更明显。结果就是，img.src 会被一遍遍重复赋成同一个 URL。别看值其实没变，浏览器往往还是会再发起一次资源加载尝试，开发工具的 Network 面板里通常就能看到这类重复请求。这样一来，不仅可能带来图片重绘和闪烁，还会白白消耗一部分性能。

✅ 更稳妥的处理方式是：只有在目标 src 和当前 img.src 确实不一致时，再执行更新。这里有个很容易踩的点要注意：img.src 拿到的是浏览器解析后的绝对 URL，比如 http://localhost:3000/dist/img/1.jpg；而 el.dataset.src 通常还是相对路径，比如 ./dist/img/1.jpg。如果把这两者直接拿来比较，哪怕指向的是同一张图，也可能因为协议、域名或路径写法不同，结果始终是 false，最终造成误判。

推荐使用以下健壮写法：

onMove(e) {
const el = e.target;

if (el.type === 'button') {
const img = tail.querySelector('img');
// 使用 dataset.src 与 img.currentSrc 对比（currentSrc 更可靠，反映实际加载源）
if (img.currentSrc !== el.dataset.src) {
img.src = el.dataset.src;
}
}

gsap.to(tail, {
x: e.clientX,
y: e.clientY,
duration: 0.05 // 建议添加轻量动画缓动，提升跟随平滑度
});
}

? 关键说明：

• img.currentSrc 返回浏览器当前实际加载或准备加载的 URL（优先级高于 src），且在未加载时为空字符串，适合用于“是否已加载该图”的判断；
• 若需严格匹配原始路径（如服务端路径一致性要求），可统一标准化路径（例如用 new URL(el.dataset.src, location).href 构建绝对地址再比较），但多数场景下 currentSrc 已足够；
• 补充 duration: 0.05 可避免 GSAP 瞬时定位带来的抖动，提升视觉体验。

⚠️ 注意事项：

• 确保 img 元素在 onEnter 中创建后始终存在，否则 tail.querySelector('img') 可能返回 null，需加空值校验；
• 若支持多图预加载或懒加载，建议配合 loading="lazy" 或 decoding="async" 属性优化性能；
• 在高频 mousemove 场景下，也可考虑节流（throttle）onMove，但本例中仅做 src 比较开销极低，通常无需额外节流。

总结：防止 img.src 重复设置的本质是「状态感知 + 条件更新」。通过 currentSrc 判断真实加载状态，而非依赖原始 dataset 值，即可兼顾准确性、兼容性与性能。