WebP image Remplacement

Question

Mon objectif final est de détecter si le navigateur est capable d'afficher les images WebP. Le cas échéant, remplacer toutes les images sur la page avec leur équivalent WebP (situé dans le même répertoire avec le même nom, extension différente)

Actuellement, j'ai un script qui détecte avec succès si le navigateur est capable d'afficher 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';
        })();

Dans le cas d'avoir un soutien WebP j'ai essayé le code suivant, mais sans succès.

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

Lorsqu'il est placé dans l'en-tête de la console ne montre correctement toutes les balises d'image, mais la source n'a pas été modifié par rapport filename.png qu'il était à l'origine.

Toutes les idées sur ce qui est mal fait?

Modifier J'ai trouvé trouvé le problème avec la raison pour laquelle il n'a pas été de charger les images, grâce à wsanville. En regardant l'onglet réseau en chrome mais révèle encore que je suis à la fois le chargement du .png et maintenant l'image WebP ainsi. Comment puis-je empêcher l'image .png de se charger en premier lieu?

Answer 1

La fonction replace renvoie une chaîne , il ne mute pas. Vous avez juste besoin d'affecter le dos de la valeur:

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

Edité pour commentaires: Tous les navigateurs télécharger le fichier correspondant dans l'attribut src d'une image. Comme alternative à votre approche, je vous suggère de stocker le nom de fichier dans un autre attribut de la balise img.

Vos mots-clés d'image pourrait ressembler à:

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

Le correspondant Javascript pourrait définir l'attribut src à la version correcte.

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

Je sais une question très ancienne, mais comme je cherchais un moyen de remplacer les images WebP avec jpgs correspondant, je ne trouve pas grand-chose.

ce post , je mis cela ensemble qui semble fonctionner dans IE 9 .

(Il pourrait en fait travailler plus en arrière avec une ancienne version jQuery, mais je suis en utilisant jQuery 2.1.1 qui breaks dans IE <= 8 donc je ne suis pas certain)

Il vérifie le soutien .webp, alors si le navigateur ne supporte pas .webp, il remplace toutes les occurrences d'un équivalent .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';
});

Answer 3

Si vous avez (un peu) le contrôle du serveur, vous pouvez utiliser la négociation de contenu au lieu de javascript. Voir http://httpd.apache.org/docs/2.2/content-negotiation. html pour la façon dont il est fait dans Apache.

Answer 4

Vous en train d'essayer de résoudre une variante du problème d'image réactif classique.

Le problème que vous avez avec la modification des attributs src image est qu'un navigateur moderne va regarder vers l'avenir et commencer à télécharger des images avec la mauvaise extension . Vous ne voulez probablement pas aux images de téléchargement que vous ne comptez pas utiliser.

L'astuce consiste à placer l'image dans une balise noscript balise, puis améliorer progressivement que, en changeant le chemin que vous avez lu le textContent de la balise. Dans les navigateurs plus anciens, vous aurez besoin d'un simple, polyfill pour lire le contenu des balises noscript.

Vous pouvez voir ma série sur les images sensibles et le soutien WebP ici . Voir un exemple basé sur responsive design classique Ethan Marcotte.