javascript - WebP 图像替换

Question

我的最终目标是检测浏览器是否能够显示 webp 图像。如果是，则将页面上的所有图像替换为其 webp 等效项(位于同一目录中，名称相同，只是扩展名不同)

目前我有一个脚本可以成功检测浏览器是否能够显示 webp

(function(){
  var WebP=new Image();
  WebP.onload=WebP.onerror=function(){
    if(WebP.height!=2){
      console.log("You do not have WebP support.");
    } else {
      console.log("You do have WebP support.");
    }
};
  WebP.src='data:image/webp;base64,UklGRjoAAABXRUJQVlA4IC4AAACyAgCdASoCAAIALmk0mk0iIiIiIgBoSygABc6WWgAA/veff/0PP8bA//LwYAAA';
        })();

在支持 webp 的情况下，我尝试了以下代码，但没有成功。

// replace .gif with .webp
var allImages = document.body.getElementsByTagName("img");
var length = allImages.length;
var i;
for(i = 0; i < length; i++){
  allImages[i].src.replace("png", "testtest");
  console.log(allImages[i]);
}

当放置在标题中时，控制台会正确显示所有图像标签，但源代码并未更改为原来的 filename.png。

对于错误的做法有什么想法吗？

编辑:我发现了为什么它没有加载图像的问题，感谢 wsanville。然而，查看 chrome 中的网络选项卡仍然显示我正在加载 png 图像，现在也加载了 webp 图像。如何防止 png 图像首先加载？

Answer 1

replace 函数返回一个字符串，但不会改变它。您只需将值赋回即可:

allImages[i].src = allImages[i].src.replace("old", "new")

已编辑评论:所有浏览器都会下载图像的 src 属性中的相应文件。作为您方法的替代方法，我建议将文件名存储在 img 标记的不同属性中。

您的图像标签可能如下所示:

<img alt="" data-png-source="/path/to/image.png" />

相应的Javascript可以将src属性设置为正确的版本。

var supportsWebP = true; //set this variable properly

for(i = 0; i < length; i++)
{
    var image = allImages[i];
    var pngSource = image.getAttribute('data-png-source');
    image.src = supportsWebP ? pngSource.replace('.png', '.webp') : pngSource;
}