图片加载过程中mouseover/mouseout事件失效问题求助

我之前碰到过几乎一模一样的问题，你的猜测方向有点偏差——其实不是jQuery卡在onload流程里无法识别mouseout，而是图片加载的异步回调会在鼠标移出后依然执行，把已经隐藏的图片又重新显示出来，看起来就像mouseout没触发。本质是异步回调和鼠标事件的时序冲突，解决思路就是给hover状态加个“开关”，确保只有用户还停留在目标div上时，图片加载完成后才执行显示逻辑。

具体解决方案 #

1. 给目标元素添加hover状态标记

在鼠标移入移出时，用data属性记录当前是否处于hover状态，这样图片加载完成后可以先检查这个状态再决定是否显示。

2. 修改图片加载函数，加入状态判断

在onload和onerror回调的最开头，先检查目标div的hover状态，如果已经移出，直接终止回调，避免无效的显示操作。

3. 优化动画控制

用stop(true, true)清空动画队列并立即完成当前动画，避免动画残留导致的显示异常。

修改后的完整代码示例 #

// 可选：全局变量跟踪当前加载的图片，避免旧请求干扰新操作
let currentLoadingImage = null;

$(document).on('mouseover', ".divclass", function() {
  const $targetDiv = $(this);
  // 标记当前处于hover状态
  $targetDiv.data('isHovering', true);
  
  const urllink = /* 这里替换成你的图片链接逻辑 */;
  
  // 取消之前未完成的图片加载请求
  if (currentLoadingImage) {
    currentLoadingImage.onload = null;
    currentLoadingImage.onerror = null;
  }
  
  currentLoadingImage = loadImage(urllink, $targetDiv);
});

$(document).on('mouseout', ".divclass", function() {
  const $targetDiv = $(this);
  // 标记为非hover状态
  $targetDiv.data('isHovering', false);
  // 强制终止动画并隐藏图片
  $(".image-content").stop(true, true).css("display", "none");
});

function loadImage(src, $targetDiv) {
  const image = new Image();
  
  image.onload = function() {
    // 先检查是否还在hover状态，不在则直接返回
    if (!$targetDiv.data('isHovering')) return;
    
    // 原有的图片有效性校验逻辑
    if ('naturalHeight' in this) {
      if (this.naturalHeight + this.naturalWidth === 0) {
        this.onerror();
        return;
      }
    } else if (this.width + this.height === 0) {
      this.onerror();
      return;
    }
    
    $('#picture').attr('src', src);
    $(".image-content").stop(true, true).fadeIn(200);
  };
  
  image.onerror = function() {
    // 同样先检查hover状态
    if (!$targetDiv.data('isHovering')) return;
    
    $('#picture').attr('src', ".../noimg.png");
    $(".image-content").stop(true, true).fadeIn(200);
  };
  
  image.src = src;
  return image;
}

额外优化说明 #

如果你的页面中有多个.divclass元素对应同一个#picture，加入全局变量currentLoadingImage可以避免旧的图片加载请求完成后，覆盖当前hover元素应该显示的图片，进一步提升体验。

内容的提问来源于stack exchange，提问作者hillcode