HTML文件末尾使用link rel=preload预加载图片的可行性及警告问题

我完全懂你的痛点：想给后续页面的图片做预加载，又怕放在<head>里拖慢首页加载，结果把<link rel="preload">放body底部还是触发了Chrome的警告——这个警告其实是浏览器在“吐槽”：你预加载了资源，但在页面load事件后的几秒内没用上，这看起来像是浪费带宽呀！

为什么放body底部还是会触发警告？ #

不管你把preload标签放在HTML的哪个位置，浏览器只要解析到它，就会立刻启动资源加载。但你预加载的是后续页面的图片，用户刚打开首页时根本不会用到这些资源，自然会触发Chrome的这个“未及时使用预加载资源”的警告——哪怕你把标签放<head>里，只要首页不用这些图，警告照样来。

更合理的解决方案：按需预加载 #

既然我们的目标是“在用户点击目标页面前完成加载”，那完全没必要一开始就加载这些图片，而是在用户表现出跳转意向时再触发预加载，比如鼠标悬停在目标页面的链接上，或者用户在首页停留超过几秒（判断他可能继续浏览）。这样既不浪费首页的带宽，又能在用户需要前把图片备好，还能彻底避免警告。

方案1：鼠标悬停链接时触发预加载（推荐）

用原生JS或jQuery实现，只有当用户把鼠标放到目标页面的链接上时，才开始预加载图片：

原生JS版本：

// 给所有指向目标页面的链接绑定事件
document.querySelectorAll('.target-page-link').forEach(link => {
  link.addEventListener('mouseover', () => {
    // 要预加载的图片列表
    const preloadImages = [
      '/images/something1.png',
      '/images/something2.png',
      // 剩下的图片...
    ];

    preloadImages.forEach(src => {
      const linkTag = document.createElement('link');
      linkTag.rel = 'preload';
      linkTag.as = 'image';
      linkTag.href = src;
      document.head.appendChild(linkTag);
    });
  });
});

jQuery版本：

// 监听目标链接的鼠标悬停事件
$('.target-page-link').on('mouseover', function() {
  const preloadImages = [
    '/images/something1.png',
    '/images/something2.png',
    // 剩下的图片...
  ];

  $.each(preloadImages, function(index, src) {
    $('<link>', {
      rel: 'preload',
      as: 'image',
      href: src
    }).appendTo('head');
  });
});

方案2：首页加载完成后延迟预加载

如果不想依赖用户交互，也可以在首页完全加载完成后，延迟几秒再开始预加载，给首页的核心资源留出加载时间：

function preloadImages(imageUrls) {
  imageUrls.forEach(url => {
    // 创建img元素利用浏览器缓存，不会触发preload警告
    const img = new Image();
    img.src = url;
  });
}

// 首页load事件触发后，延迟2秒开始预加载
window.addEventListener('load', () => {
  setTimeout(() => {
    preloadImages([
      '/images/something1.png',
      '/images/something2.png',
      // 剩下的图片...
    ]);
  }, 2000);
});

这种方式用普通图片加载替代preload，不会触发浏览器的警告，而且图片会被存在浏览器缓存里，用户进入目标页面时直接从缓存读取。

关于那个警告的额外说明 #

如果你坚持要用静态的preload标签，其实这个警告是可以忽略的——只要你确定这些资源是后续页面必须的，不是误加的。但从性能优化的角度，按需预加载显然更聪明：既满足了预加载的需求，又不会拖慢首页，还让浏览器“无话可说”。

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