Drupal中FAQ模块切换后触发图片懒加载JS函数问题

你已经精准定位了问题核心：折叠状态下的.collapsed类给FAQ内容加上了display: none，导致懒加载脚本lazy.js无法检测到这些图片元素。调用runblazy()没生效，大概率是因为脚本的初始化逻辑已经标记过这些元素，或者DOM更新的时机没卡对。下面给你几个可行的解决方案：

1. 绑定切换事件，在DOM更新后触发懒加载刷新 #

首先要确保在FAQ展开的DOM状态完全更新后再调用懒加载的刷新方法，而不是点击后立刻执行。因为类的切换是同步的，但浏览器的重绘可能有延迟，加上很多懒加载库会跳过已标记的元素，所以可以加个小延迟：

// 假设FAQ的切换按钮是带.faq-toggle类的元素，根据你的实际HTML调整选择器
document.querySelectorAll('.faq-toggle').forEach(toggleBtn => {
  toggleBtn.addEventListener('click', () => {
    // 等待DOM完成重绘，确保.collapsed类已经被移除
    setTimeout(() => {
      // 优先使用懒加载库的官方刷新方法（比如bLazy的revalidate）
      if (window.blazy && typeof window.blazy.revalidate === 'function') {
        window.blazy.revalidate();
      } 
      // 如果你的runblazy是自定义初始化函数，直接调用
      else if (typeof runblazy === 'function') {
        runblazy();
      }
    }, 100); // 100ms足够让DOM完成更新
  });
});

2. 检查并修改runblazy()的逻辑 #

如果runblazy()是你自己写的初始化函数，第一次运行后可能已经给图片加了类似data-loaded的标记，导致第二次调用时跳过这些元素。可以修改函数逻辑，让它只处理未加载且当前可见的图片：

function runblazy() {
  // 选择所有未加载的懒加载图片（根据你的懒加载类名调整）
  const unloadedImages = document.querySelectorAll('.lazy-img:not([data-loaded])');
  
  unloadedImages.forEach(img => {
    // 检查图片所在的FAQ内容是否已经展开（即父元素没有.collapsed类）
    const isAnswerVisible = !img.closest('.faq-answer').classList.contains('collapsed');
    
    if (isAnswerVisible) {
      // 加载图片
      img.src = img.dataset.src;
      // 标记为已加载，避免重复处理
      img.setAttribute('data-loaded', 'true');
      // 移除懒加载类
      img.classList.remove('lazy-img');
    }
  });
}

3. 替换display: none为非脱离文档流的隐藏方式 #

display: none会让元素完全脱离文档流，很多懒加载脚本会忽略这类元素。你可以改用height: 0 + overflow: hidden的方式隐藏折叠内容，这样元素仍然存在于DOM中，懒加载脚本可能在页面初始化时就能检测到：

/* 修改.collapsed的样式 */
.faq-answer.collapsable.collapsed {
  height: 0;
  overflow: hidden;
  transition: height 0.3s ease; /* 可选：添加平滑过渡 */
}

/* 展开时的样式 */
.faq-answer.collapsable {
  height: auto;
}

这种方式下，图片始终在文档流中，懒加载脚本（尤其是基于Intersection Observer的）可能会在元素可见时自动触发加载，不需要额外调用runblazy()。

4. 基于Intersection Observer的优化方案 #

如果你的lazy.js是用Intersection Observer实现的，初始时display: none的元素不会被监听。可以在FAQ展开后，手动让Observer重新观察这些图片：

// 初始化Intersection Observer
const lazyObserver = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      lazyObserver.unobserve(img); // 停止观察已加载的图片
    }
  });
});

// 绑定FAQ切换事件
document.querySelectorAll('.faq-toggle').forEach(toggle => {
  toggle.addEventListener('click', () => {
    setTimeout(() => {
      // 获取当前展开的FAQ内容
      const activeAnswer = toggle.nextElementSibling; // 根据你的HTML结构调整
      // 选择内容里的懒加载图片
      const lazyImgs = activeAnswer.querySelectorAll('.lazy-img');
      // 让Observer重新观察这些图片
      lazyImgs.forEach(img => lazyObserver.observe(img));
    }, 100);
  });
});

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