jquery - 循环遍历图像 "srcset"属性并替换文件类型后缀

Question

我正在使用功能检测来确定浏览器是否支持 .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) {错误消失，但脚本不再替换后缀。

我哪里出错了？

Answer 1

其中有一些匹配，但检查某些内容是否确实如您所想总是一个好主意。

在这种情况下，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');
    }
});

执行 if (srcset && srcset.match... 意味着如果第一个检查失败，则第二个检查不会运行，而当像 null 这样的虚假值时，它会执行第二个检查> 或 undefined 被传入。