Webp -Bildersatz

Question

Mein Endziel ist es zu erkennen, ob der Browser Webp -Bilder anzeigen kann. Wenn dies der Fall ist, ersetzen Sie alle Bilder auf der Seite durch ihr Webp -Äquivalent (im selben Verzeichnis mit demselben Namen, nur eine andere Erweiterung).

Derzeit habe ich ein Skript, das erfolgreich erkennt, ob der Browser WebP anzeigen kann

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

In dem Fall, dass ich WebP -Unterstützung habe, habe ich den folgenden Code ausprobiert, war aber erfolglos.

// 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]);
}

Wenn die Konsole in den Header platziert wird, zeigt die Konsole alle Bild -Tags korrekt an, aber die Quelle wurde nicht vom Dateinamen geändert.

Irgendwelche Ideen darüber, was falsch gemacht wird?

Bearbeiten: Ich fand heraus, warum es dank Wsanville die Bilder nicht geladen hat. Wenn Sie die Registerkarte "Netzwerk" in Chrome betrachten, zeigt jedoch immer noch, dass ich sowohl das PNG als auch jetzt auch das Webp -Bild lade. Wie kann ich verhindern, dass das PNG -Bild an erster Stelle lädt?

Answer 1

Das replace Funktion Gibt eine Zeichenfolge zurück, Es mutiert es nicht. Sie müssen nur den Wert zurückweisen:

allImages[i].src = allImages[i].src.replace("old", "new")

Bearbeitet für einen Kommentar:Alle Browser laden die entsprechende Datei in die herunter src Attribut eines Bildes. Als Alternative zu Ihrem Ansatz schlage ich vor, den Dateinamen in einem anderen Attribut der zu speichern img Schild.

Ihre Bild -Tags könnten aussehen wie:

<img alt="" data-png-source="/path/to/image.png" />

Das entsprechende JavaScript könnte das festlegen src Attribut auf die richtige Version.

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

Ich kenne das eine sehr alte Frage, aber als ich nach einer Möglichkeit suchte, Webp -Bilder durch entsprechende JPGs zu ersetzen, fand ich nicht viel.

Mit dieser Beitrag, Ich habe das zusammengestellt, was den IE 9 zu funktionieren scheint.

(Es könnte tatsächlich weiterhin mit einer älteren JQuery -Version zurückgearbeitet, aber ich verwende JQuery 2.1.1, das in IE <= 8 einbricht, also bin ich nicht sicher.)

Es prüft nach .webp -Unterstützung. Wenn der Browser nicht unterstützt wird .Webp, ersetzt es alle Vorkommen durch ein .JPG -Äquivalent.

$(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

Wenn Sie (einige) die Kontrolle über den Server haben, können Sie Inhaltsverhandlungen anstelle von JavaScript verwenden. Sehen http://httpd.apache.org/docs/2.2/content-negotiation.html für wie es in Apache gemacht wird.

Answer 4

Sie versuchen tatsächlich, eine Variation des klassischen reaktionsschnellen Bildproblems zu lösen.

Das Problem, das Sie beim Ändern der Bild -SRC -Attribute haben, ist, dass ein moderner Browser nach vorne schaut und Bilder herunterlädt mit der falschen Erweiterung. Sie möchten wahrscheinlich keine Bilder herunterladen, die Sie nicht verwenden werden.

Der Trick besteht darin, das Bild in a zu platzieren NoScript Tag und erhöhen Sie dies dann schrittweise, indem Sie den Pfad ändern, während Sie das lesen Textinhalt des Tags. In älteren Browsern brauchen Sie eine Einfache Polyfill Lesen Sie den Inhalt von NoScript -Tags vor.

Sie können meine Serie auf reaktionsschnelle Bilder und Webp -Unterstützung anzeigen hier. Ein Beispiel anzeigen hier Basierend auf dem klassischen Reaktionsdesign von Ethan Marcotte.