getAttribute()与setAttribute()失效及图片悬停加载函数故障求助

我来帮你梳理下这个图片懒加载的问题，结合你的场景和需求，整理几个可行的解决方案：

核心问题分析 #

你需要实现用户hover弹窗时才加载对应图片，避免初始加载所有图片拖慢页面，同时遇到了getAttribute()/setAttribute()失效的问题，大概率是原生DOM方法和jQuery数据缓存的兼容性问题，或者事件绑定、元素选择的逻辑漏洞。

完整实现方案（推荐jQuery写法，兼容性更好） #

1. 先规范HTML结构 #

初始时把图片真实地址存在data-src，src设为轻量占位图（避免空src触发无效请求）：

<!-- 触发hover的元素 -->
<div class="tool_tip" data-tool="pop_content_1">Hover查看弹窗1</div>
<div class="tool_tip" data-tool="pop_content_2">Hover查看弹窗2</div>

<!-- 弹窗容器 -->
<div class="pop_content_1 tool_pop">
  <img data-src="/real-image-1.jpg" src="/placeholder.png" alt="示例图1">
</div>
<div class="pop_content_2 tool_pop">
  <img data-src="/real-image-2.jpg" src="/placeholder.png" alt="示例图2">
  <img data-src="/real-image-3.jpg" src="/placeholder.png" alt="示例图3">
</div>

2. 编写懒加载逻辑 #

用mouseenter代替hover（避免鼠标进出重复触发），同时避免重复加载已加载的图片：

jQuery('.tool_tip').on('mouseenter', function() {
  // 获取当前弹窗的类名
  var popClass = jQuery(this).data('tool');
  // 定位到对应的弹窗容器
  var targetPop = jQuery('.' + popClass);

  // 遍历弹窗内未加载的图片（筛选带data-src属性的）
  targetPop.find('img[data-src]').each(function() {
    var $img = jQuery(this);
    // 从data属性获取真实地址
    var realSrc = $img.data('src');

    // 替换src并移除data-src，防止重复加载
    $img.attr('src', realSrc).removeAttr('data-src');
    
    // 可选：添加加载失败兜底
    $img.on('error', function() {
      $(this).attr('src', '/error-placeholder.png');
    });
  });
});

解决getAttribute/setAttribute失效的问题 #

如果一定要用原生DOM方法，注意两个关键点：

1. 确保data-src是HTML原生属性，不是通过jQuery的.data()动态设置的（jQuery会把data-*数据存在内部缓存，而非DOM属性里，原生方法拿不到）
2. 正确的原生写法示例：

// 找到弹窗内的图片
const imgs = document.querySelectorAll('.' + popClass + ' img[data-src]');
imgs.forEach(img => {
  const realSrc = img.getAttribute('data-src');
  img.setAttribute('src', realSrc);
  // 移除属性避免重复加载
  img.removeAttribute('data-src');
});

额外优化点 #

• 动态弹窗适配：如果弹窗是AJAX动态生成的，改用事件委托绑定：

  jQuery(document).on('mouseenter', '.tool_tip', function() {
    // 上述相同的加载逻辑
  });
  

• 性能优化：给已加载的图片添加loaded类，下次hover时直接跳过：

  targetPop.find('img[data-src]:not(.loaded)').each(function() {
    // ...加载逻辑
    $img.addClass('loaded');
  });
  

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