浏览器图片优化

 预期效果：

        项目优化，对不同浏览器进行判断是否支持png, avif, 和 webp格式图片，以达到更快的渲染效果

    <img id="avifImg" style="display: none" src="imgs/loaded.avif" alt="avif" />
    <img id="webpImg" style="display: none" src="imgs/loaded.webp" alt="webp" />

<script>
      window.onload = function () {
        var isSupportAvif = document.querySelector("#avifImg"),
          isSupportWebp = document.querySelector("#webpImg");
        (function () {
          window.imgSupport = { png: !0, avif: !1, webp: !1 };
          ["avif", "webp"].forEach(function (f) {
            (function (b, h) {
              function d(a) {
                0 == isSupportAvif.width && "avif" == b
                  ? (a = !1)
                  : 0 == isSupportWebp.width && "webp" == b && (a = !1);
                window.localStorage.setItem(g, JSON.stringify(a));
                h(a);
              }
              var g = "lobby@support@" + b,
                k = ["Chrome", "Opera", "Edge", "Firefox"],
                l = navigator.userAgent;
              try {
                var e = JSON.parse(window.localStorage.getItem(g));
              } catch (a) {
                console.error("Failed to parse localStorage item:", a),
                  (e = null);
              }
              if (null !== e) d(e);
              else if (
                k.some(function (a) {
                  return -1 !== l.indexOf(a);
                })
              )
                d(!0);
              else {
                var c = new Image();
                c.onload = function () {
                  d(0 < c.width && 0 < c.height);
                };
                c.onerror = function () {
                  d(!1);
                };
                c.src =
                  "data:image/" +
                  b +
                  ";base64,UklGRhoAAABXRUJQVlA4TA0AAAAvAAAAEAcQERGIiP4HAA==";
              }
            })(f, function (b) {
              window.imgSupport[f] = b;
            });
          });
        })();
      };
    </script>

代码解析：

1.变量声明:

var isSupportAvif = document.querySelector("#avifImg"),
    isSupportWebp = document.querySelector("#webpImg");

这里通过 document.querySelector 获取页面上两个元素（假设是图片），分别用于测试 AVIF 和 WebP 的支持情况。

2.外部循环:

["avif", "webp"].forEach(function (f) { ... });

使用 forEach 方法遍历数组 ["avif", "webp"]，并对每个元素执行回调函数。

3.立即调用的函数表达式 (IIFE):

(function (b, h) { ... })(f, function (b) { ... });

对每个图像格式（avif 或 webp），创建一个立即调用的函数表达式 (IIFE)，并传递两个参数：

• b: 当前图像格式（avif 或 webp）。
• h: 一个回调函数，用于处理检测结果。

4.内部函数 d:

function d(a) { ... }

定义了一个内部函数 d，用于处理图像格式的支持情况，并将其结果存储到 localStorage 中

5.检查本地存储:

var g = "lobby@support@" + b;
try {
  var e = JSON.parse(window.localStorage.getItem(g));
} catch (a) {
  console.error("Failed to parse localStorage item:", a), (e = null);
}
if (null !== e) d(e);

尝试从 localStorage 中获取之前保存的结果。如果成功解析，则直接调用 d 函数处理该结果。

6.用户代理检测:

var k = ["Chrome", "Opera", "Edge", "Firefox"], l = navigator.userAgent;
if (k.some(function (a) { return -1 !== l.indexOf(a); })) d(!0);

 检查用户的浏览器是否为 Chrome、Opera、Edge 或 Firefox。如果是这些浏览器之一，则认为支持 avif 和 webp 格式，并调用 d 函数处理结果。

7.图像加载测试:

else {
  var c = new Image();
  c.onload = function () { d(0 < c.width && 0 < c.height); };
  c.onerror = function () { d(!1); };
  c.src = "data:image/" + b + ";base64,UklGRhoAAABXRUJQVlA4TA0AAAAvAAAAEAcQERGIiP4HAA==";
}

 如果不是上述浏览器，则通过加载一个 base64 编码的图像来测试浏览器是否支持 avif 或 webp 格式。如果图像加载成功且尺寸大于零，则认为支持该格式；否则认为不支持。

8.回调函数 h:

})(f, function (b) { window.imgSupport[f] = b; });

将检测结果传递给回调函数 h，并将结果存储在 window.imgSupport 对象的相应属性中

使用方法：

window.localStorage.getItem('lobby@support@avif')获取对应支持情况，写获取对应图片路径