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