•  25-10-2019
  •  | 
  •  

質問

私の最終目標は、ブラウザが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画像がロードされないようにするにはどうすればよいですか？

役に立ちましたか？

解決

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

他のヒント

私はこれが非常に古い質問であることを知っていますが、WebP画像を対応するJPGに置き換える方法を探していたので、あまり見つかりませんでした。

と この郵便受け, 、私はこれをまとめて、IE 9を通じて機能しているようです。

（実際には古いjQueryバージョンでさらに動作するかもしれませんが、私はjquery 2.1.1を使用しています。

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

サーバーの（一部の）制御がある場合は、JavaScriptの代わりにコンテンツネゴシエーションを使用できます。見る http://httpd.apache.org/docs/2.2/content-negotiation.html Apacheでそれがどのように行われるかについて。

あなたは実際に、古典的な応答性のある画像の問題のバリエーションを解決しようとしています。

画像SRC属性を変更することに抱えている問題は、最新のブラウザが先を見据えて画像のダウンロードを開始することです 間違った拡張機能があります. 。おそらく、使用しない画像をダウンロードしたくないでしょう。

トリックは、画像を内側に配置することです noscript タグを付けて、読みながらパスを変更することにより、次第に強化します TextContent タグの。古いブラウザでは、必要です シンプルなポリフィル noscriptタグの内容を読み取ります。

レスポンシブ画像とWebPサポートで私のシリーズを表示できます ここ. 。例を表示します ここ イーサンマルコットの古典的なレスポンシブデザインに基づいています。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top