Picturefill не работает в Internet Explorer; не распознает srcset?

Я использовал Picturefill для загрузки нескольких изображений на свою веб-страницу. Они правильно отображаются в Chrome, но не отображаются в Internet Explorer 8.

Вот пример моего кода:

<link href="styles.css" rel="stylesheet" type="text/css">
<script src="js/modernizr.custom.11641.js"></script>
<script async="true" src="js/picturefill.js"></script>
<script src="js/respond.js"></script>
</head>

<body>
<div class="wrapper">
    <header class="x-padding inside-b-padding">
        <h1 class="nocontent outline">Baseball for Busy
        People</h1>


    <picture class="logo">
        <!--[if IE 9]><video style="display: none;"><![endif]-->
        <source srcset="images/logo.png" media="(min-width: 750px)">
        <!--[if IE 9]></video><![endif]-->
        <img srcset="images/logo-small.png" alt="Baseball for Busy People">
    </picture>

(Я включаю верхнюю часть на случай, если моя ссылка на файл является частью проблемы).

Я могу просмотреть демо в IE 8: http://scottjehl.github.io/picturefill/examples/demo-02.html. Но изображения на моей странице не работают.

Вот что я пробовал:

  1. Я скопировал и вставил код из демо на свою страницу (изменив пути к изображениям на абсолютные) - они не отображались.
  2. Я добавил скрипт для создания элемента <picture> (хотя я использую Modernizr, так что он не нужен).

  3. Я добавил путь src к тегу img, и это сработало, но я читал, что Picturefill не рекомендует это делать.


html css internet-explorer picturefill
person amylynn83    schedule 17.03.2015    source источник
comment
В качестве первого порта захода я бы посмотрел на ваши медиаблоки, поскольку я вижу, что вы используете response.js. На всякий случай вы случайно что-то скрываете для IE8. Приведенный выше код, который вы предоставили, выглядит нормально для меня, поэтому не знаю, почему на этом - можете ли вы предоставить кодовую ручку? Также можно рассмотреть возможность добавления ниже этого блока ‹noscript› со стандартным ‹img src=.   -  person Jamie Paterson    schedule 27.03.2015

Ответы (1)


arrow_upward
6
arrow_downward

Я знаю, что этот вопрос задавали давно, но, возможно, это поможет другим, кто сталкивается с подобной проблемой. У меня была та же проблема, когда изображения Picturefill не загружались на моем веб-сайте в браузерах, которые не поддерживают его изначально (например, IE9 - IE11). Исправление заключалось в том, чтобы убедиться, что picturefill() вызывается при добавлении элемента на страницу (я вызывал его в директиве в Angular и componentDidMount в React).

person quietbits    schedule 13.05.2016
comment
вы, сэр, мой герой. Я переключал некоторые элементы через javascript, а в IE11 картинки не загружались, так что это все еще проблема. Ваш ответ сработал для меня. - person Jason Lydon; 27.05.2016
comment
Этот ответ - золото. componentDidMount() — это ключ для тех, у кого есть проблемы с React. - person morkro; 30.08.2016