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

里面有几个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');
    }
});

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

Answer 2

谢谢，Adeneo。那使我走上了正确的道路。 ~~这是最终的工作代码：~~

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

编辑：原来我的webp路径以.jpg.webp结尾，所以我不得不将代码重写为此：

jQuery(document).ready(function ($) {
  if ($('html').hasClass('webp')) {
    $('a[href$=".jpg"]').each(function (index, element) {
      var path = $(this).attr('href');
      if (typeof path !== typeof undefined && path !== false) {
        path = $(this).attr("href", path + ".webp");
      }
    });
    $('img').each(function (index, element) {
      var elem = $(this);
      var source = $(this).attr('src');
      if ((typeof source !== typeof undefined && source !== false) && source.match(/\.(gif|jpe?g|png)$/i)); {
        source = $(this).attr("src", source + ".webp");
      }
      var sourceset = $(this).attr('srcset');
      if ((typeof sourceset !== typeof undefined && sourceset !== false) && elem.attr('srcset').match(/\.jpg/ig)) {
        element.srcset = element.srcset.replace(/\.jpg/ig, '.jpg.webp');
        element.srcset = element.srcset.replace(/\.jpeg/ig, '.jpeg.webp');
        element.srcset = element.srcset.replace(/\.gif/ig, '.gif.webp');
        element.srcset = element.srcset.replace(/\.png/ig, '.png.webp');
      }
    });
  }
});

欢迎提供任何有关重构以提高效率的建议。

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

2 个答案: