AngularJS: как лучше всего загружать разные версии картинок?

Question

[arlovski]

Привет. Суть вопроса вот в чём: есть две версии вёрстки (<992px и >992px соответственно), хочу загружать только x или 2х картинки для определённой версии (речь о теге img, не о background-image).
Какое решение я вижу:

// в шаблоне 
<img ng-src="/images/pic5-{{screen}}.jpg">

//в контроллере или директиве
$scope.screen = $window.screen.width >=992 ? 'lg' : 'sm'
$window.bind('resize', function {
 $scope.screen = $window.screen.width >=992 ? 'lg' : 'sm'
})

ну в общем суть понятна, 'слушаю' resize event и меняю урл картинки.

как вы решали такую задачу, если была? может есть какой-то другой бэст практис или плагин с абстракцией?

Answer 1

[Николай]

Я бы как минимум обернул всё это добро в директиву, в которой грузил бы в случае необходимости AJAX'ом, чтобы картинка не пропадала на неопределенное время при ресайзе.
При событии ресайза проверял бы, изменилось ли что-то.
Т.е. если уже было меньше 992 и осталось меньше - ничего не делать.
А при изменениях кидал бы event. Это намного более универсально, чем в $scope биндить.
Директива бы соответственно была подписана на этот event.

Answer 2

[Назар Линовецкий]

Для этой цели используйте элемент <pictures>. Это нативный HTML подход для реализации подобной задачи. Он позволяет непосредственно в разметке писать медиа-запросы... и не только. Для большей информации, советую посмотреть доклад Вадима Макеева на эту тему: https://www.youtube.com/watch?v=Szo-2D7TtEU

Comments

[arlovski]

про picture слышал, спасибо за видео. но, к сожалению, браузерная поддержка не подходит, а костылить полифилы не очень хочется.