Проблемы с атрибутом srcset в Google Chrome версии 40
Я вижу много несоответствий с атрибутом 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 с изображениями не-Placelace.it и использую Picturefill.js http://scottjehl.github.io/picturefill/
У меня нет проблем в FF или Safari (оба используют picturefill).
iOS Chrome имеет аналогичные проблемы.
Мой синтаксис неправильный? Что-то происходит, о чем я не знаю?
1 ответ
Это особенность, а не ошибка. Chrome не переключает размер, потому что Chrome уже имеет увеличенное изображение в кеше, поэтому нет необходимости загружать новые данные того же изображения.
Если вы хотите использовать разные изображения или одно и то же изображение с разными обрезками, используйте элемент picture.
Адаптивные изображения можно технически дифференцировать между 2 типами.
- srcset с исходными дескрипторами (пусть браузер выберет правильное изображение в зависимости от размера / разрешения экрана, пропускной способности...):
- дескриптор плотности (x) (для статических размеров изображения, Retina против нормального разрешения)
- дескриптор ширины (w) и соответствующий атрибут размеров (для гибких, адаптивных / адаптивных изображений (автоматически также включает оптимизацию Retina)
- и элемент picture с его исходными [media] дочерними элементами (дает автору контроль над тем, какой srcset должен быть выбран браузером в зависимости от конкретных медиа-запросов)
Так img[srcset] для переключения разрешения и picture для разных изображений, реагирующих на ваш дизайн