WebP Immagine Sostituzione

Question

Il mio obiettivo finale è quello di rilevare se il browser è in grado di visualizzare immagini WebP. Se lo è, sostituire tutte le immagini sulla pagina con il loro equivalente WebP (che si trova nella stessa directory con lo stesso nome, solo diversa estensione)

Attualmente ho uno script che rileva correttamente se il browser è in grado di visualizzare 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';
        })();

All'interno del telaio per avere il supporto WebP ho provato il seguente codice, ma avuto successo.

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

Quando collocato nell'intestazione la console non mostra correttamente tutti i tag di immagine, ma la fonte non è stato modificato dal filename.png che in origine era.

Tutte le idee su ciò che viene fatto in modo errato?

Modifica ho scoperto scoperto il problema con il motivo per cui non è stato il caricamento delle immagini, grazie a wsanville. Guardando la scheda di rete in cromo tuttavia rivela ancora che io sono carico sia l'ora l'immagine WebP png e pure. Come posso evitare che l'immagine png caricamento in primo luogo?

Answer 1

La funzione replace restituisce una stringa , che non mutano esso. Hai solo bisogno di assegnare il valore di schiena:

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

A cura per un commento: Tutti i browser scaricherà il file corrispondente all'attributo src di un'immagine. Come alternativa per il vostro approccio, vi suggerisco di memorizzare il nome del file in un diverso attributo del tag img.

I tuoi tag immagine potrebbe apparire come:

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

Il corrispondente JavaScript potrebbe impostare l'attributo src alla versione corretta.

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

So che questa una domanda molto vecchio, ma come ho cercato un modo per sostituire le immagini WebP con JPG corrispondente, non ho trovato molto.

questo post , ho messo questo insieme che sembra funzionare con IE 9 .

(Si potrebbe effettivamente funzionare più indietro con una versione precedente jQuery, ma sto usando jQuery 2.1.1, che rompe in IE <= 8, quindi non sono certo)

Si verifica la presenza di supporto .webp, quindi se il browser non supporta .webp, sostituisce tutte le occorrenze di un .jpg equivalente.

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

Se si dispone di (alcuni) il controllo del server, è possibile utilizzare la negoziazione del contenuto invece di javascript. Vedere http://httpd.apache.org/docs/2.2/content-negotiation. html per come si fa in Apache.

Answer 4

Al momento stai cercando di risolvere una variante del classico problema di immagine reattivo.

Il problema che hai con la modifica gli attributi src immagine è quella di un browser moderno sarà guardare avanti e iniziare a scaricare le immagini con l'estensione sbagliata . Probabilmente non si vuole scaricare le immagini che non si intende utilizzare.

Il trucco è quello di posizionare l'immagine all'interno di un noscript tag, poi progressivamente migliorare che cambiando il percorso come si legge il textContent del tag. In browser più vecchi avrete bisogno di un semplice polyfill per leggere il contenuto dei tag noscript.

È possibile visualizzare miei serie sulle immagini responsive e supporto WebP qui . Visualizza un esempio qui sulla base di responsive design classico di Ethan Marcotte.