0

我的最终目标是检测浏览器是否能够显示 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 图像首先加载？

4

4 回答 4

4

该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;
}
于 2011-11-29T17:57:53.167 回答
2

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

通过这篇文章，我把它放在一起，这似乎可以通过 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';
});
于 2014-07-27T00:18:56.833 回答
0

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

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

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

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

于 2012-08-08T13:55:38.917 回答
0

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

于 2011-11-29T17:54:21.750 回答