时间戳

首页 > 解决方案 > 循环通过图像“srcset”属性并替换文件类型后缀

jquery - 循环通过图像“srcset”属性并替换文件类型后缀

问题描述

我正在使用功能检测来确定浏览器.webp是否仅支持这些浏览器的格式和加载 javascript。我在客户端这样做的原因是 PHP 解决方案（使用 .htaccess）不起作用，可能是因为我的 CDN 正在缓存 JPEG、PNG 或 GIF 版本。

此代码有效，但它会引发错误 ( Uncaught TypeError: Cannot read property 'match' of undefined)，并且该错误会停止所有其他脚本的运行。不漂亮。

jQuery(document).ready(function ($) {
  $('a[href$=".jpg"]').each(function (index, element) {
    element.href = element.href.replace(/\.(gif|jpe?g|png)$/i, '.webp');
  });
  $('img').each(function (index, element) {
    var elem = $(this);
    if (elem.attr('src').match(/\.(gif|jpe?g|png)$/i)); {
      element.src = element.src.replace(/\.(gif|jpe?g|png)$/i, '.webp');
    }
  });
  $('img').each(function (index, element) {
    var elem = $(this);
    if (elem.attr('srcset').match(/\.(gif|jpe?g|png)/ig)) {
      element.srcset = element.srcset.replace(/\.(gif|jpe?g|png)/ig, '.webp');
    }
  });
});

如果我更改$('img').each(function (index, element) {为$('.element img').each(function (index, element) {错误消失，但脚本不再替换后缀。

我哪里错了？

标签： jquerysrcset

解决方案

那里有几个match，但检查某些东西是否真的是你认为的那样总是一个好主意。

在这种情况下，attr()很可能返回undefined一个或多个元素，因此您必须检查

$('img').each(function (index, element) {
    var elem   = $(this),
        scrset = elem.attr('srcset');

    if (srcset && srcset.match(/\.(gif|jpe?g|png)/ig)) {
        element.srcset = element.srcset.replace(/\.(gif|jpe?g|png)/ig, '.webp');
    }
});

Doingif (srcset && srcset.match...意味着如果第一个检查失败，则第二个检查不会运行，当传入 or 之类的虚假值时它会null运行undefined。

推荐阅读