Как загрузить изображение webp в `new Image ()` через JavaScript в Safari - PullRequest
Новая
       13

Как загрузить изображение webp в `new Image ()` через JavaScript в Safari

0 голосов
/ 13 октября 2019

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

Вот пример, демонстрирующий успех и неудачу для двоихразличные форматы изображений:

https://codepen.io/corylogan/pen/OJJMERo?editors=1010

Вот код для потомков 

const loadImageAsync = (item) => {
  let image = new Image()
  console.log(item)
  image.src = item
  image.onload = function () {
    console.log('successful onload')
  }

  image.onerror = function (e) {
    console.log('got an error')
    console.log(e)
  }
}

loadImageAsync('https://upload.wikimedia.org/wikipedia/commons/a/a5/Red_Kitten_01.jpg')
loadImageAsync('https://s3.amazonaws.com/road-trip-blog/1c9fe9f0-4e9e-3604-9b77-e35d7ecfc40f-w2100.webp')

В Chrome оба изображения сообщат об успехе. В Safari и Mobile Chrome на iOS ошибка webp завершается с ошибкой: {"isTrusted":true}.

Ошибка не очень полезна. Но я думаю, что могу понять, когда смотрю на заголовки, отправленные из Chrome и Safari для соответствующего запроса:

Safari 

Request
GET /road-trip-blog/1c9fe9f0-4e9e-3604-9b77-e35d7ecfc40f-w2100.webp HTTP/1.1
Accept: image/png,image/svg+xml,image/*;q=0.8,video/*;q=0.8,*/*;q=0.5
Pragma: no-cache
Referer: https://cdpn.io/
Cache-Control: no-cache
Host: s3.amazonaws.com
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0.2 Safari/605.1.15
Accept-Language: en-us
Accept-Encoding: br, gzip, deflate
Connection: keep-alive

Chrome 

Provisional headers are shown
Referer: https://cdpn.io/
Sec-Fetch-Mode: no-cors
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/77.0.3865.90 Safari/537.36

Угадайте

Может ли это быть что-то связанное с Sec-Fetch-Mode в chrome или Accept заголовком в Safari?

Я не могу сейчас думать о многом другом. Есть идеи?

1 Ответ

0 голосов
/ 14 октября 2019

Я чувствую себя глупо: Webp не поддерживается ни на iOS, ни в Safari. Это просто не сработает. https://caniuse.com/#feat=webp

...