使用jQuery判断指定src的sequencer图片是否可见并显示遮罩

嘿，我发现你现在的代码逻辑有个小问题：页面加载时只检查了一次图片的状态，但sequencer.js是动态切换图片src的呀，这肯定没法捕捉到图片切换到./images/22.jpg的时刻！下面给你几个实用的解决方案，按需选就行：

方案1：监听图片src的变化 #

因为sequencer会动态修改img标签的src，我们可以盯着这个属性的变化来触发遮罩的显示/隐藏：

jQuery(document).ready(function ($) {
  // 给目标图片绑定src变化监听
  $('img.sequencer').on('change', function() {
    // 检查当前是不是目标图片，而且图片处于可见状态
    if ($(this).attr('src') === './images/22.jpg' && $(this).is(':visible')) {
      $('#over_1').css('display', 'block');
    } else {
      // 其他情况把遮罩藏起来
      $('#over_1').css('display', 'none');
    }
  });

  // 页面刚加载时做一次初始检查，防止初始状态就是目标图片
  const $targetImg = $('img.sequencer');
  if ($targetImg.attr('src') === './images/22.jpg' && $targetImg.is(':visible')) {
    $('#over_1').css('display', 'block');
  }
});

要是有些浏览器对change事件支持不佳，就用兼容性更强的MutationObserver来监听属性变化：

jQuery(document).ready(function ($) {
  const sequencerImg = $('img.sequencer')[0];
  // 创建属性变化观察器
  const observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
      if (mutation.attributeName === 'src') {
        const currentSrc = sequencerImg.src;
        // 用includes避免浏览器转绝对路径导致匹配失败
        if (currentSrc.includes('./images/22.jpg') && $(sequencerImg).is(':visible')) {
          $('#over_1').show();
        } else {
          $('#over_1').hide();
        }
      }
    });
  });

  // 配置观察器，仅监听src属性
  observer.observe(sequencerImg, { attributes: true });

  // 初始状态检查
  if (sequencerImg.src.includes('./images/22.jpg') && $(sequencerImg).is(':visible')) {
    $('#over_1').show();
  }
});

方案2：用sequencer.js自带的事件（最推荐） #

大部分序列动画库都会提供帧切换的回调事件，比如frameChange或者update之类的，直接绑定这个事件比监听属性靠谱多了！比如假设你的sequencer初始化代码是这样的（根据你用的库的实际API调整）：

jQuery(document).ready(function ($) {
  // 初始化sequencer时绑定帧切换回调
  const sequencer = $('#images').sequencer({
    // 你的其他配置项（比如帧率、图片序列数组等）
    onFrameChange: function(frameIndex, frameSrc) {
      // 每切换一帧就检查当前图片路径
      if (frameSrc === './images/22.jpg' && $('img.sequencer').is(':visible')) {
        $('#over_1').show();
      } else {
        $('#over_1').hide();
      }
    }
  });
});

这个方案最精准，直接和库的原生事件挂钩，不会有延迟或兼容性问题，建议先翻下sequencer.js的文档，确认有没有类似的回调函数。

额外提醒 #

• 路径匹配：浏览器可能会把相对路径转换成绝对路径，用includes代替严格相等会更稳妥，比如改成currentSrc.includes('/images/22.jpg')
• 可视区域判断：如果你的需求是“图片滚到屏幕里才显示遮罩”，is(':visible')可能不够，得结合IntersectionObserver来做真正的视口可见性检查哦

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