实现鼠标悬停<a>标签时加载图片，优化9MB大页面体积

你的思路方向是对的，但当前的CSS方案只是控制了图片容器的显示隐藏——浏览器在加载页面时，会自动请求所有<img>标签src属性对应的资源，不管元素是否被隐藏，所以初始页面还是会加载全部200张图片，体积根本降不下来。

要实现真正的「悬停时才加载图片」，核心是让图片在初始状态下不触发请求，直到用户hover时再去加载。下面是具体的可落地方案：

1. 修改HTML结构 #

把图片的真实地址存在自定义属性data-src里，不要直接写在src上（src可以留空，或者用一个1x1的透明占位图）：

<div>
  <a href="/somepage" class="img-trigger">悬停查看图片</a>
  <div class="img-container">
    <img data-src="your-image-path.jpg" alt="图片描述" />
  </div>
</div>

2. 保留你的CSS样式（可微调） #

继续用CSS控制容器的显示隐藏，确保hover时图片容器能正常展示：

.img-container {
  display: none;
  position: absolute;
  /* 可以补充基础样式，比如限制图片最大宽度 */
  max-width: 300px;
}
.img-trigger:hover + .img-container {
  display: block;
}

3. 用JavaScript监听hover事件，触发图片加载 #

当用户hover到<a>标签时，再把data-src的值赋值给<img>的src属性，这时候浏览器才会发起图片请求：

// 获取所有需要触发图片加载的a标签
const imageTriggers = document.querySelectorAll('.img-trigger');

imageTriggers.forEach(trigger => {
  // 找到对应的img元素
  const targetImg = trigger.nextElementSibling.querySelector('img');
  
  // 监听鼠标进入事件
  trigger.addEventListener('mouseenter', () => {
    // 避免重复加载：只有src未设置或者和data-src不同时才赋值
    if (!targetImg.src || targetImg.src !== targetImg.dataset.src) {
      targetImg.src = targetImg.dataset.src;
    }
  });
});

为什么这个方案能解决问题？ #

• 初始状态下，<img>的src为空，浏览器不会发起图片请求，初始页面体积只有HTML、CSS和少量JS的大小，完全避免了预加载200张图片的冗余
• 当用户hover时，才会触发图片的加载请求；加载后的图片会被浏览器缓存，下次再hover同一个标签时，直接从缓存读取，不会重复请求
• 这个方案可以批量处理页面上的所有图片，不需要为每个图片写单独的代码

额外优化建议 #

• 可以给<img>标签添加一个加载中的占位样式（比如灰色背景+加载动画），提升用户等待体验
• 如果需要支持触摸设备，可以同时监听touchstart事件，适配移动端交互
• 如果担心用户快速hover离开导致不必要的请求，可以添加防抖处理，但一般浏览器会自动取消未完成的请求，影响不大

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