时间戳

首页 > 解决方案 > webp/jpg - 仅在 html 文件中预加载所需的类型

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

问题描述

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

所以我有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)">

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

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

但我可以说“如果你支持 webp，那么预加载 webp 而不要预加载 jpg”？

谢谢，弗洛里安

标签： htmljpegwebppreloading

解决方案

我实施的解决方案涉及一个小脚本，取自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>

推荐阅读