Задать вопрос
@arlovski

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

Привет. Суть вопроса вот в чём: есть две версии вёрстки (<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 и меняю урл картинки.

как вы решали такую задачу, если была? может есть какой-то другой бэст практис или плагин с абстракцией?
  • Вопрос задан
  • 252 просмотра
Подписаться 3 Оценить Комментировать
Ответ пользователя Назар Линовецкий К ответам на вопрос (2)
forbestweb
@forbestweb
Web Developer
Для этой цели используйте элемент <pictures>. Это нативный HTML подход для реализации подобной задачи. Он позволяет непосредственно в разметке писать медиа-запросы... и не только. Для большей информации, советую посмотреть доклад Вадима Макеева на эту тему: https://www.youtube.com/watch?v=Szo-2D7TtEU
Ответ написан