SvelteKit图片预加载仅点击触发，hover时不生效问题排查

SvelteKit的data-sveltekit-preload-data="hover"只会在鼠标悬停链接时，预加载目标页面的JSON数据（即load函数返回的内容），不会自动渲染目标页面的组件。你写的<link rel="preload">是放在目标页面的<svelte:head>里的，只有当目标页面组件被实际渲染（点击链接后），这个预加载标签才会被插入到页面头部，所以图片只会在点击后才开始加载。

方法1：在链接组件中手动触发图片预加载 #

在包含跳转链接的组件里，监听鼠标悬停事件，动态创建预加载标签：

<script>
  let imagePreloaded = false;
  // 目标页面的图片URL，可通过props或API获取
  const targetImageUrl = "/path/to/your-title-image.jpg";

  function handleHoverPreload() {
    if (imagePreloaded) return;
    const preloadLink = document.createElement('link');
    preloadLink.rel = 'preload';
    preloadLink.as = 'image';
    preloadLink.href = targetImageUrl;
    document.head.appendChild(preloadLink);
    imagePreloaded = true;
  }
</script>

<a 
  href="/your-target-page" 
  on:mouseenter={handleHoverPreload}
>
  点击进入目标页面
</a>

方法2：在目标页面的load函数中触发预加载 #

利用preload-data="hover"会在悬停时调用目标页面load函数的特性，在load函数里手动添加预加载标签：

// 目标页面的 +page.js 或 +page.server.js
export async function load({ data }) {
  // 仅在浏览器环境执行，避免SSR报错
  if (typeof document !== 'undefined') {
    const preloadLink = document.createElement('link');
    preloadLink.rel = 'preload';
    preloadLink.as = 'image';
    preloadLink.href = data.page.titleImageSrc;
    document.head.appendChild(preloadLink);
  }
  return { ...data };
}

这样设置后，鼠标悬停链接时，目标页面的load函数会被调用，同时触发图片预加载，和JSON数据预加载同步进行。

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