Hover预加载时如何避免重复请求和资源浪费？

W″薪羽提问于 2026-02-09 12:27:37 阅读 52

优化

我在给产品页的商品缩略图做Hover预加载时遇到了问题，当鼠标快速移进移出多个图片时，控制台显示重复请求了同一个资源。我用了下面的代码，但发现即使移开后又移回来，还是会触发新的请求，这样会不会导致带宽浪费？


document.querySelectorAll('.thumbnail').forEach(item => {
  item.addEventListener('mouseover', () => {
    const url = item.dataset.preview;
    const img = new Image();
    img.src = url; // 这里每次hover都创建新Image对象
  });
});

我尝试过在mouseout时设置img.src为空，但发现这样预加载反而失效了。有没有更好的方式既能提前加载hover目标资源，又不会在频繁操作时重复请求？

我来解答赞 9 收藏

反馈

1 条解答

UX-文斌 Lv1

试试这个，用个缓存对象记录已加载的URL，避免重复请求：

const preloaded = {};

document.querySelectorAll('.thumbnail').forEach(item => {

  item.addEventListener('mouseover', () => {

    const url = item.dataset.preview;

    if (!preloaded[url]) {

      preloaded[url] = true;

      const img = new Image();

      img.src = url;

    }

  });

});

2026-02-09 13:01