Альтернативный текст временно отображается до того, как picturefill.js отобразит правильное изображение

Я пытаюсь настроить picturefill.js для доставки адаптивных изображений. Когда я использую атрибут srcset вместо атрибута src, чтобы избежать двойной загрузки, стандартный текст изображений постоянно отображается до того, как picturefill.js сможет отобразить правильное изображение.

<!DOCTYPE html>
<html lang="en">
    <head>
        <script>document.createElement( "picuture" );</script>
        <script async src="js/picturefill.min.js"></script>
    </head>
    <body>   
        <picture>
            <source srcset="desktop.jpg" media="(min-width: 768px)">                        
            <img srcset="mobile.jpg" alt="...">
        </picture>
    </body>
</html>

Мне просто интересно, если это известная проблема и есть ли обходной путь. Только 1 из 3 устройств, которые я тестировал, которые не полностью поддерживают элемент picture (они получают двойную загрузку, если я использую атрибут src), не отображают текст alt с атрибутом srcset; а именно, мой скоростной iPhone 6; мой более медленный iPhone 4 и iPad 1 отображают альтернативный текст, и мне просто интересно, будет ли это просто скорость устройства, которое будет выглядеть так, как будто оно НЕ отображается.

Единственный реальный недостаток, о котором я слышал, когда люди говорят об использовании picturefill.js, заключается в том, чтобы исключить атрибут src, чтобы избежать двойной загрузки, оставив те, у которых без javascript изображения по умолчанию альтернативный текст - ничего, что касается temp. рендеринг альтернативного текста во время завершения скриптинга, что почти так же плохо или хуже, чем двойная загрузка.

0 ответов

Другие вопросы по тегам