webp/jpg - 仅预加载 html 文件中所需的类型

Question

我有一个网站，我使用 webp 和 jpg 作为后备。在标题中，我有一个双图像和适合移动用户的较小图像。

所以我有4个文件：

header-big.webp
header-small.webp
header-big.jpg
header-small.jpg

因为它位于标题中，所以我希望预加载图像，但仅预加载我需要的图像。对于小和大的，我可以使用媒体属性预加载它。

<link rel="preload" href="header-small.jpg" as="image" type="image/jpg" media="(max-width: 575px)">
<link rel="preload" href="header-small.webp" as="image" type="image/webp" media="(max-width: 575px)">
<link rel="preload" href="header-big.jpg" as="image" type="image/jpg" media="(min-width: 576px)">
<link rel="preload" href="header-big.webp" as="image" type="image/webp" media="(min-width: 576px)">

在这种情况下，浏览器总是根据其宽度预加载两个文件，但仍然只使用其中一个。

jeah，这是有道理的，因为 jpg 和 webp 都可以实现。所以浏览器当然会预加载两者。

但我可以说“如果你支持 webp，就预加载 webp 并且不预加载 jpg”吗？

谢谢，弗洛里安

Answer 1

我实现的解决方案涉及从https://avif.io/blog/tutorials/use-avif-in-css/获取的一个小脚本来检测 AVIF 和 WEBP，因为之后我已经需要它来添加对这两种格式的 CSS 支持，但对于您的用例可以稍微简化一下。一旦我知道它受支持，我就会preload在头部添加一个链接。

我将脚本放在头部的最末端，因为在我的特殊情况下，我不需要提前获得图像。

<script type="text/javascript">
  function addPreloadLink(img, type) {
    var fileref = document.createElement('link');
    fileref.setAttribute('rel', 'preload');
    fileref.setAttribute('as', 'image');
    fileref.setAttribute('href', img);
    fileref.setAttribute('type', type);

    document.head.appendChild(fileref);
  }

  function AddClass(c) {
    document.documentElement.classList.add(c);
  }

  var webp = new Image();
  webp.src =
    'data:image/webp;base64,UklGRhoAAABXRUJQVlA4TA0AAAAvAAAAEAcQERGIiP4HAA==';
  webp.onload = function() {
    AddClass('webp');
    addPreloadLink('header-small.webp', 'image/webp');
    addPreloadLink('header-big.webp', 'image/webp');
  };
  webp.onerror = function() {
    //load JPG
    addPreloadLink('header-small.jpg', 'image/jpg');
    addPreloadLink('header-big.jpg', 'image/jpg');
  };
</script>