Замена изображения WebP - PullRequest
Новая
       8

Замена изображения WebP

0 голосов
/ 29 ноября 2011

Моя конечная цель - определить, способен ли браузер отображать изображения в Интернете.Если это так, замените все изображения на странице их эквивалентами webp (расположенными в том же каталоге с тем же именем, но с другим расширением)

В настоящее время у меня есть скрипт, который успешно определяет, способен ли браузерdisplay 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, которым он был изначально.

Есть идеи, что делается неправильно?

Редактировать: Iобнаружил обнаружил проблему с тем, почему он не загружал изображения, благодаря wsanville.Однако, глядя на вкладку «Сеть» в Chrome, я все еще обнаруживаю, что я загружаю как png, так и теперь изображение webp.Как я могу предотвратить загрузку изображения png?

Ответы [ 4 ]

5 голосов
/ 29 ноября 2011

Функция 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;
}
2 голосов
/ 27 июля 2014

Я знаю, что это очень старый вопрос, но, поскольку я искал способ заменить изображения webp соответствующими jpgs, я не нашел много.

с этим постом , яположить это вместе, что, кажется, работает через IE 9.

(Это может на самом деле работать дальше с более старой версией jQuery, но я использую jQuery 2.1.1, который ломается в IE <= 8, поэтому яне уверен) </p>

Он проверяет поддержку .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';
});
0 голосов
/ 08 августа 2012

Вы на самом деле пытаетесь решить вариацию классической проблемы адаптивного изображения.

Проблема, с которой вы сталкиваетесь при изменении атрибутов src для изображения, заключается в том, что современный браузер будет смотреть в будущее и начнет загружать изображения с неправильным расширением . Вы, вероятно, не хотите загружать изображения, которые вы не собираетесь использовать.

Хитрость заключается в том, чтобы поместить изображение в тег noscript , а затем постепенно улучшать его, изменяя путь по мере чтения textContent тега. В старых браузерах вам понадобится простой полифилл для считывания содержимого тегов noscript.

Вы можете посмотреть мою серию о адаптивных изображениях и поддержке webP здесь . Посмотрите пример здесь на основе классического адаптивного дизайна Этана Маркотта.

0 голосов
/ 29 ноября 2011

Если у вас есть (некоторый) контроль над сервером, вы можете использовать согласование содержимого вместо javascript. См. http://httpd.apache.org/docs/2.2/content-negotiation.html, как это делается в Apache.

...