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;
}

Answer 2

我知道这是一个很老的问题，但当我想用相应的jpgs替换webp映像时，我没有发现多少。

使用这个职位，我把它放在一起，这似乎是通过IE9实现的。

(实际上，它可能在更早的jQuery版本中工作，但我使用的是jQuery 2.1.1，它在IE <= 8中中断，所以我不确定)

它检查是否支持.webp，然后如果浏览器不支持.webp，则将所有出现的事件替换为.jpg等效项。

$(function() {
  var WebP=new Image();
  WebP.onload=WebP.onerror=function(){
    if(WebP.height!=2){
      $('img[src$=".webp"]').each(function(index,element) {
        element.src = element.src.replace('.webp','.jpg');
      });
    }
  };
  WebP.src='data:image/webp;base64,UklGRjoAAABXRUJQVlA4IC4AAACyAgCdASoCAAIALmk0mk0iIiIiIgBoSygABc6WWgAA/veff/0PP8bA//LwYAAA';
});

Answer 3

如果您对服务器有(一些)控制，您可以使用内容协商而不是javascript。有关如何在Apache中完成此操作，请参见http://httpd.apache.org/docs/2.2/content-negotiation.html。