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

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

この投稿で、私はこれをまとめました。これはIE9で機能するようです。

（実際には古いバージョンのjQueryでさらに機能する可能性がありますが、IE <=8で動作するjQuery2.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';
});
于 2014-07-27T00:18:56.833 に答える
0

あなたは実際に古典的なレスポンシブ画像の問題のバリエーションを解決しようとしています。

image src属性を変更する際の問題は、最新のブラウザが先読みして、間違った拡張子の画像のダウンロードを開始することです。使用しない画像をダウンロードしたくない場合があります。

秘訣は、画像をnoscriptタグ内に配置し、タグのtextContentを読み取るときにパスを変更することで、画像を徐々に拡張することです。古いブラウザでは、noscriptタグのコンテンツを読み取るための単純なポリフィルが必要になります。

レスポンシブ画像とwebPサポートに関する私のシリーズはこちらでご覧いただけます。EthanMarcotteのクラシックなレスポンシブデザインに基づいた例をここに表示します。

于 2012-08-08T13:55:38.917 に答える
0

サーバーを（ある程度）制御できる場合は、javascriptの代わりにコンテンツネゴシエーションを使用できます。Apacheでの実行方法については、 http：//httpd.apache.org/docs/2.2/content-negotiation.htmlを参照してください。

于 2011-11-29T17:54:21.750 に答える