Откат для внедрения SVG без поддержки Javascript / SVG - PullRequest
Новая
       12

Откат для внедрения SVG без поддержки Javascript / SVG

0 голосов
/ 17 сентября 2018

Мы собираемся использовать Iconfu SVGInject для внедрения файлов SVG в наши файлы HTML.Один из наших проектов по какой-то причине все еще требует поддержки IE8 (не спрашивайте), поэтому я был вынужден проверить это на действительно старых браузерах.

Существует резервный пример для отсутствия поддержки SVG в документах SVGInject, который выглядит следующим образом (размеры изображения добавлены мной): 

<html>
<head>
  <script src="svg-inject.min.js"></script>
</head>
<body>
  <img src="image.svg" width="128" height="128" onload="SVGInject(this)" onerror="SVGInject.err(this, 'image.png')" />
</body>
</html>

В то время как запасной вариантработает со стандартной конфигурацией IE8, я обнаружил, что не существует запасного варианта для случаев, когда браузер не поддерживает ни SVG, ни Javascript (например, IE8 с отключенным Javascript).

Вот что отображается в различных сценариях:

Современные браузеры (Chrome, Firefox, Webkit)

SVG внедряется как встроенный SVG, полностью поддерживает стиль

Современные браузеры, Javascript отключен

SVG отображается как <img>, не поддерживается

Internet Explorer 8

Отображается резервный PNG

Internet Explorer 8, JavaScript отключен

Отображается разбитое изображение

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

Мне было интересно, есть ли способ (или способ взлома) сделать резервное изображение даже в тех случаях, когда ни SVG, ни поддержка Javascript недоступны.

Примечание: этоболее теоретический вопрос.Хотя проект требует поддержки IE8, я думаю, что это некое устаревшее требование, так как требования были написаны в 2010 году.

1 Ответ

0 голосов
/ 17 сентября 2018

На самом деле есть способ сделать это, но он не идеален, потому что он оказывает влияние на производительность в Internet Explorer 9, 10 и 11.

Вот реализация с полным резервом без Javascript инет поддержки SVG: 

<html>
<head>
  <script src="svg-inject.min.js"></script>
  <script>
    // Wrapper for SVGInject that does a little preprocessing
    SVGInject2 = function(img, options) {
      if (typeof SVGRect != 'undefined') { // check if SVG is supported
        // replace src with srcset if srcset is provided
        var srcset = img.srcset;
        if (srcset) {          
          img.src = srcset;
        }
        SVGInject(img, options);
      }
    }
  </script>
</head>
<body>
  <img src="image.png" srcset="image.svg" width="128" height="128" onload="SVGInject2(this)" />
</body>
</html>


Как это работает?

Как вы, возможно, знаете, есть атрибут srcsetдля элемента HTML <img>, который имеет приоритет над атрибутом src, если он указан.srcset поддерживается вечнозелеными браузерами (Chrome, Firefox и т. Д.), Но не поддерживается Internet Explorer (все версии).

Если Javascript отключен, PNG, указанный в атрибуте src, будет отображаться наInternet Explorer.В современных браузерах будет использоваться атрибут srcset с URL-адресом SVG.

Если Javascript включен, функция SVGInject2() вызывается после загрузки изображения.Это проверяет, поддерживается ли SVG браузером.Если поддержка SVG не обнаружена, она ничего не делает.Это должно происходить только в IE8 и старше, которые будут отображать PNG, как если бы Javascript был отключен.Если обнаружена поддержка SVG, значение атрибута src будет заменено значением из атрибута srcset и будет вызвана функция SVGInject().Это загружает SVG (используя URL из атрибута src) через XHR и заменяет элемент <img> загруженным SVG.В большинстве случаев в браузере SVG уже находится в кеше (от начальной загрузки), поэтому SVG передается по сети только один раз.

Однако это отрицательно сказывается на производительности Internet Explorer 9, 10.и 11. В этих браузерах PNG будет загружен в любом случае, потому что srcset не поддерживается.Если SVG вводится, PNG не используется, что означает, что передача PNG не требуется.В других браузерах не должно быть никакого влияния на производительность при использовании этого резервного метода.

Отказ от ответственности: я являюсь одним из авторов SVGInject.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...