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图像的方法时，我找不到多少。

使用this post，我把它放在一起似乎可以通过IE 9工作。

（它可能实际上可以用更旧的jQuery版本继续工作，但我使用的是jQuery 2.1.1，它在IE中打破＆lt; = 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。

Answer 4

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

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

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

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

WebP图像替换

4 个答案: