如何通过SCSS延迟Turbo Frame加载？现有方案存问题

问题根源 #

你当前的SCSS仅实现了视觉上的延迟显示——鼠标悬停时立刻将#hoverContent设为display:inline-block，只是通过动画让透明度延迟变为1。但Turbo的loading="lazy"会检测元素是否处于可见DOM状态（哪怕视觉透明），因此会立刻发起加载请求，导致误触时产生不必要的网络请求。

解决方案：JS+CSS配合控制加载时机 #

通过JavaScript监听悬停事件，设置延迟定时器，只有用户悬停满指定时长后，再显示悬浮内容并触发Turbo Frame的加载。

1. 修改HTML（移除初始src）

先移除Turbo Frame的src属性，避免页面加载时或悬停初始阶段触发请求：

<div class="hoverWrapper">
  <span role="button" aria-describedby="id">
    <div class="card card--info">
        cool code block here
    </div>
  </span>
  <div id="hoverContent">
    <turbo-frame id="id" target="_top" role="tooltip" loading="lazy">
      Loading...
    </turbo-frame>
  </div>
</div>

2. 简化SCSS（保留基础样式与过渡）

去掉原有的动画逻辑，改用简单的过渡效果保证显示平滑：

.hoverWrapper {
  display: inline-block;
  position: relative;
}

#hoverContent {
  display: none;
  text-align: center;
  min-width: 15rem;
  top: -20px;
  left: 50%;
  transform: translate(-50%, -100%);
  color: var(--color-dark);
  background-color: var(--color-white);
  font-weight: normal;
  font-size: var(--font-size-s);
  border-radius: var(--border-radius);
  position: absolute;
  z-index: 99999999;
  box-sizing: border-box;
  box-shadow: var(--shadow-back);
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.5s ease;

  i {
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -12px;
    width: 24px;
    height: 12px;
    overflow: hidden;

    &::after {
      position: absolute;
      width: 12px;
      height: 12px;
      left: 50%;
      transform: translate(-50%,-50%) rotate(45deg);
      background-color: var(--color-white);
      box-shadow: var(--shadow-back);
    }
  }
}

3. 添加JS控制逻辑

监听鼠标进入/离开事件，通过定时器实现延迟加载，鼠标离开时立即终止：

document.querySelectorAll('.hoverWrapper').forEach(wrapper => {
  let hoverTimer;
  const hoverContent = wrapper.querySelector('#hoverContent');
  const turboFrame = hoverContent.querySelector('turbo-frame');
  const turboSrc = '你的实际请求地址'; // 替换为Turbo Frame的真实src

  wrapper.addEventListener('mouseenter', () => {
    // 设置1.5秒延迟（可根据需求调整）
    hoverTimer = setTimeout(() => {
      // 显示悬浮内容
      hoverContent.style.display = 'inline-block';
      hoverContent.style.visibility = 'visible';
      hoverContent.style.opacity = '1';
      // 触发Turbo Frame加载
      turboFrame.setAttribute('src', turboSrc);
    }, 1500);
  });

  wrapper.addEventListener('mouseleave', () => {
    // 清除定时器，终止加载流程
    clearTimeout(hoverTimer);
    // 隐藏悬浮内容
    hoverContent.style.display = 'none';
    hoverContent.style.visibility = 'hidden';
    hoverContent.style.opacity = '0';
    // 可选：移除src，下次悬停重新触发加载
    turboFrame.removeAttribute('src');
  });
});

原理说明 #

• 鼠标进入时启动定时器，只有悬停满指定时长才会执行显示内容和设置Turbo src的操作；
• 鼠标离开时立即清除定时器，避免未完成的加载请求；
• 动态设置Turbo Frame的src属性，确保仅在用户真正需要时才发起网络请求，彻底避免误触导致的无效请求。

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