Moim celem końcowym jest wykrycie, jeśli przeglądarka jest w stanie wyświetlić obrazy webp. Jeśli jest, wymień wszystkie obrazy na stronie z ich odpowiednikiem webp (znajduje się w tym samym katalogu o tej samej nazwie, tylko inne rozszerzenie)

Obecnie mam skrypt, który pomyślnie wykrywa, jeśli przeglądarka jest w stanie wyświetlić 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';
        })();

Wewnątrz obudowy do obsługi webp Próbowałem następującego kodu, ale nie powiodło się.

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

Po umieszczeniu w nagłówku konsola prawidłowo pokazuje wszystkie znaczniki obrazu, ale źródło nie zostało zmienione z nazwy pliku.png, że pierwotnie było.

Jakieś pomysły na temat tego, co jest wykonywane nieprawidłowo?

Edytuj: Znalazłem znaleziony problem z tym, dlaczego nie ładowano obrazów, dzięki Wsanville. Patrząc na kartę sieciową w Chrome jednak nadal ujawnia, że ładuję zarówno obraz PNG, jak i teraz obraz Webp. Jak mogę zapobiec ładowaniu obrazu PNG w pierwszej kolejności?

0
tgrosinger 29 listopad 2011, 21:52

4 odpowiedzi

Najlepsza odpowiedź

Funkcja replace Zwraca ciąg , nie ma go go mutacji. Wystarczy przypisać wartość z powrotem:

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

Edytowany dla komentarza: Wszystkie przeglądarki pobierają odpowiedni plik w atrybucie src obrazu. Jako alternatywny do twojego podejścia sugeruję przechowywanie nazwy pliku w innym atrybucie znacznika img.

Twoje tagi obrazu mogą wyglądać:

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

Odpowiedni JavaScript może ustawić atrybut src do prawidłowej wersji.

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;
}
4
wsanville 29 listopad 2011, 19:02

Wiem to bardzo stare pytanie, ale jak szukałem sposobu na wymianę obrazów Webp z odpowiednimi jpgami, nie znalazłem zbyt wiele.

Z Ten post, umieściłem to razem, co wydaje się pracować przez IE 9.

(To może działać dalej z powrotem ze starszą wersją jQuery, ale używam jQuery 2.1.1, co się dzieje w IE <= 8, więc nie jestem pewien)

Sprawdza obsługę .webp, a następnie, jeśli przeglądarka nie obsługuje .webp, zastępuje wszystkie zdarzenia z odpowiednikiem .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';
});
2
Community 23 maj 2017, 10:34

Jeśli masz (niektóre) kontrolę nad serwerem, możesz użyć negocjacji treści zamiast JavaScript. Zobacz http://httpd.apache.org/docs/2.2/content-Negotiation. HTML dla tego, jak to się robi w Apache.

0
Martijn 29 listopad 2011, 17:54

Próbujesz rozwiązać zmianę klasycznego reagującego problemu obrazu.

Problem, który masz ze zmieniającym się obrazem Atrybuty SRC, jest to, że nowoczesna przeglądarka będzie wyglądać w przyszłość i rozpocznij pobieranie obrazów z niewłaściwym rozszerzeniem . Prawdopodobnie nie chcesz pobierać zdjęć, których nie zamierzasz użyć.

Sztuką jest umieszczenie obrazu wewnątrz znacznika noskrypter , a następnie stopniowo poprawić, że zmieniając ścieżkę podczas przeczytania TextContent tag. W starszych przeglądarkach będziesz potrzebować Proste Polifultycznie, aby odczytać zawartość znaczników noscriptowych.

Możesz przeglądać moją serię na responsywnych obrazach i wsparciu webp Oto. Wyświetl przykład Oto oparty na klasycznym reagującym projekcie Ethan Marcotte.

0
James Westgate 8 sierpień 2012, 13:55