Подтвердить что ты не робот

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

Я вижу много несоответствий с атрибутом srcset для тегов img (отзывчивые изображения) в Chrome 40.0.2214.91

До того, как я обновился до Chrome v40 (я был на ~ 39), атрибут srcset работал нормально и заменил бы изображение при изменении размера браузера. Теперь, иногда, меньшая версия изображения будет отображаться, если у меня установлен браузер на нужную ширину, а затем обновите страницу. В других случаях это не сработает.

Тестирование jsbin: http://jsbin.com/hulaconake/1/edit?html,output

Идентификатор изображения У меня есть:

<img srcset="http://placehold.it/300x200 300w, http://placehold.it/500x400 500w">

Я также тестирую это в другом env с изображениями nonPlacehold.it и используя Picturefill.js http://scottjehl.github.io/picturefill/

У меня нет проблем в FF или Safari (оба с использованием picturefill).

iOS Chrome имеет схожие проблемы.

Является ли мой синтаксис неправильным? Что-то происходит, о котором я не знаю?

4b9b3361

ОТВЕТЫ

Ответ 1

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

Если вы хотите использовать разные изображения или одинаковое изображение с разными культурами, используйте элемент изображения.

Отзывчивые изображения могут быть технически дифференцированы между 2 типами.

  • srcset с исходными дескрипторами (пусть браузер выбирает правильное изображение на основе размера экрана/разрешения, полосы пропускания...):
    • дескриптор плотности (x) (для статических размеров изображения, Retina против нормального разрешения)
    • дескриптор ширины (w) и соответствующий атрибут размеров (для гибких, адаптивных/адаптивных изображений (автоматически также включает оптимизацию сетчатки)
  • и элемент изображения со своими дочерними [media] детьми (дает автору контроль над тем, какой srcset должен быть выбран браузером в зависимости от конкретных запросов к мультимедиа)

So img[srcset] предназначен для переключения разрешения, а picture - для разных изображений, реагирующих на ваш дизайн.