Отображение резервной копии в HTML

Question

Когда браузер не может обрабатывать пакет шрифта specialFont, следующий код автоматически переключает шрифт basicFont:

<p style="font-family:'specialFont', basicFont"> Hello world! </p> 

То же самое, возможно, для изображений? У меня есть svg-образ, который я хотел бы отображать в общем, и резервный png для браузеров, которые не поддерживают svg (например, некоторые мобильные браузеры).

Answer 1

Я не думаю, что это возможно, как это, но вот хорошее & быстрое решение: http://css-tricks.com/svg-fallbacks/

Answer 2

Вы можете использовать OnError событие, чтобы заполнить этот пробел. Событие Ting onError с jQuery или аналогичным образом мы можем предоставить изображение по умолчанию. Для больше у меня есть post.

Answer 3

Простым сценарием является использование элемента object с другим элементом object (ссылаясь, например, на файл PNG) внутри него, то есть в качестве резервного содержимого. Хотя это, похоже, хорошо работает на Android 2, IE 8 и старше запутались в этом. Поэтому я думаю, что мы должны обращаться с ними с некрасивыми «IE pseudocomments» (так называемые «условные комментарии».):

<!--[if (IE 9)|!(IE)]><!--> 
    <object data=logo.svg type=image/svg+xml width=50 height=50> 
    <object data=logo.png type=image/png width=50 height=50> 
     <span class=logo>ACME</span> 
    </object> 
    </object> 
<!-- <![endif]--> 
<!--[if lte IE 8]> 
    <img src=logo.png alt=ACME> 
<![endif]--> 

Answer 4

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

<picture> 
    <source id="s1" srcset="portrait_version.svg" type="image/svg+xml" media="orientation: portrait"> 
    <source id="s2" srcset="landscape_version.svg" type="image/svg+xml"> 
    <img src="fallback.png" alt="" onerror="this.onerror=null;document.getElementById('s1').srcset=document.getElementById('s2').srcset=this.src;"> 
</picture>