Отзывчивые изображения srcset не работают

Я пытаюсь реализовать новый подход srcset к отзывчивым изображениям, используя следующий HTML

        <img class="swapImages"
        srcset="assets/images/content/large.jpg 1200w,
                assets/images/content/medium.jpg 800w,
                assets/images/content/small.jpg 400w"
        sizes="100vw"
        src="assets/images/content/small.jpg"
        alt="responsive image">

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

Я читал где-то, что у меня было polyfill, поэтому я использовал плагин picturefill, хотя хром должен его поддерживать..... все равно не работает.

Я собрал для него демо-страницу: http://www.darrencousins.com/lab/resp-img-srcset/

Что я делаю неправильно/не получаю?

Любая помощь широко оценивается.

Ответы

Ответ 1

У вас это правильно.

Дело в том, что как только у вашего браузера будет изображение с более высоким разрешением (загружено, в кеше), нет смысла загружать его более низкое качество, даже если вы уменьшаете свое окно (это необходимо для сохранения трафик).

Итак, если вы хотите проверить это, просто сделайте свое окно меньше, а THEN загрузите страницу (после очистки кеша/или использования режима инкогнито). Вы получите версию мобильного или планшета. Затем, увеличив окно, вы в какой-то момент увидите, что ваш браузер переключается на изображение с более высоким разрешением.

Ответ 2

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

<picture>
  <source srcset="large.jpg" media="(min-width: 1200px)" />
  <source srcset="medium.jpg" media="(min-width: 800px)" />
  <img src="small.jpg" />
</picture>

Ответ 3

Я только что заметил, что на вашей демонстрационной странице (http://www.darrencousins.com/lab/resp-img-srcset/) никогда не отображалась мобильная версия (даже при изменении размера браузера или использовании режима DevTools - Device) в Google Chrome (версия 48).

Изменение отношения пикселей устройства к 1, по-видимому, приводит к загрузке правильного изображения.

enter image description here

enter image description here

Я не знаю почему, мне интересно, учитывают ли w дескрипторы соотношение пикселей устройства

Ответ 4

Я предполагаю, что вы тестируете на браузере Chrome, и единственная причина, по которой он не работает, состоит в том, что он имеет хромированную функцию. См. Ниже поток (он хорош для последней версии chrome v54):

Проблемы с атрибутом srcset для версии 40 Google Chrome

Проверял вашу страницу на IE8 и Firefoxv49, и все работает как шарм!

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

<img srcset="assets/images/content/large.jpg 1200w" alt="large image">

Ответ 5

Для любого, кто использует боковую панель Chrome DevTools, вы можете указать Chrome отключить кэш, когда DevTools открыт. Изменение вашего окна просмотра и обновление будет отображать правильное адаптивное изображение, если оно будет давать вам самое большое (кэшированное) изображение.

  1. Откройте DevTools (F12)
  2. Перейдите в Настройки
  3. Прокрутите вниз до сети
  4. Установите флажок Отключить кэш (когда открыт DevTools)

Ответ 6

откройте инструмент разработки, затем перейдите на вкладку сети и отключите функцию catch. что все больше ничего.