Javascript WebP图像替换

我的最终目标是检测浏览器是否能够显示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]);
}

//将.gif替换为.webp
var allImages=document.body.getElementsByTagName（“img”）；
变量长度=allImages.length；
var i；
对于（i=0；i

当放置在标题中时，控制台会正确显示所有图像标记，但源文件并未从最初的filename.png更改

有没有关于什么地方做得不对的想法

---

编辑：多亏了wsanville，我发现了为什么不加载图像的问题。但是，查看chrome中的“网络”选项卡仍然可以发现，我正在加载png，现在也加载webp图像。如何首先防止加载png图像？

如果您（部分）控制了服务器，可以使用内容协商而不是javascript。请参阅以了解如何在Apache中完成此操作。

如果您（部分）控制了服务器，则可以使用内容协商而不是javascript。请参阅以了解在Apache中是如何实现的。

函数

replace

返回一个字符串，它不会对其进行变异。您只需重新分配该值：

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

编辑以供评论： 所有浏览器都将下载图像的

src

属性中的相应文件。作为替代方法，我建议将文件名存储在

img

标记的不同属性中

您的图像标记可能如下所示：

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

---

replace

函数返回一个字符串，它不会对其进行变异。您只需重新分配该值：

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

编辑以供评论： 所有浏览器都将下载图像的

src

属性中的相应文件。作为替代方法，我建议将文件名存储在

img

标记的不同属性中

您的图像标记可能如下所示：

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

---

实际上，您正在尝试解决经典响应图像问题的一个变体

更改图像src属性的问题在于，现代浏览器会向前看，并开始下载具有错误扩展名的图像。您可能不想下载不打算使用的图像

诀窍是将图像放置在noscript标记中，然后在读取标记的textContent时通过更改路径逐步增强图像。在较旧的浏览器中，您将需要读取noscript标记的内容

---

您可以在响应图像和webP支持上查看我的系列。查看一个基于Ethan Marcotte经典响应设计的示例。

您实际上是在尝试解决经典响应图像问题的一个变体

更改图像src属性的问题在于，现代浏览器会向前看，并开始下载具有错误扩展名的图像。您可能不想下载不打算使用的图像

诀窍是将图像放置在noscript标记中，然后在读取标记的textContent时通过更改路径逐步增强图像。在较旧的浏览器中，您将需要读取noscript标记的内容

---

您可以在响应图像和webP支持上查看我的系列。查看一个基于Ethan Marcotte经典响应式设计的示例。

我知道这是一个非常古老的问题，但当我寻找用相应的JPG替换webp图像的方法时，我没有找到多少

用，我把这个放在一起，似乎通过IE9工作

---

（它实际上可能在更老的jQuery版本中工作，但我使用的是jQuery 2.1.1，它突破了IE我知道这是一个非常老的问题，但当我寻找用相应的JPG替换webp图像的方法时，我并没有发现太多

用，我把这个放在一起，似乎通过IE9工作

---

（它实际上可能在更旧的jQuery版本中运行，但我使用的是jQuery 2.1.1，它在IE中中断。不幸的是，在这台服务器上，我没有任何控制权。不幸的是，在这台服务器上，我没有任何控制权。如此简单的错误，我不敢相信我没有看到。谢谢！实际上，在Chrome中查看网络选项卡，我似乎仍在下载png图像，然后是webp图像。如何防止png图像下载？它现在适用于Chrome，但当我尝试在Firefox中加载它时，它似乎没有正确地添加src属性。将控制台日志放入for循环中表明循环甚至没有运行（适用于firefox和IE）。发现了问题。只有在浏览器支持WebP的情况下，图像加载程序才会运行。只是需要重新处理一下。谢谢有一个简单的错误，我不敢相信我没有看到。谢谢！事实上，看着Chrome中的“网络”选项卡，我似乎仍在下载png图像，然后是WebP图像。我如何防止png图像出现错误rom是否下载过？它现在对Chrome有效，但是当我尝试在Firefox中加载它时，它似乎没有正确地添加src属性。在for循环中添加控制台日志显示循环甚至没有运行（对于Firefox和IE）。发现问题。只有在浏览器支持WebP的情况下，图像加载程序才会运行。只是需要重新处理。谢谢我建议使用更轻的解决方案进行WebP支持检测我建议使用更轻的解决方案进行WebP支持检测