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

如果您有（某些）服务器的控制权，您可以使用内容协商而不是javascript。请参阅http://httpd.apache.org/docs/2.2/content-negotiation.html了解它是如何在Apache中完成的。

Answer 3

您实际上正试图解决经典响应式图像问题的变体。

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

的窍门是将图像放在一个无脚本标签内，然后逐步提高，通过改变路径，当你阅读标签的的textContent。在较旧的浏览器中，您需要一个simple polyfill来读出noscript标签的内容。

您可以查看我的系列响应图像和webP支持here。根据Ethan Marcotte的经典响应式设计查看示例here。

Answer 4

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

随着this post，我把这个在一起，这似乎通过IE工作9

（实际工作方式可能进一步回用旧的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'; 
});