Angular - изменить изображение в соответствии с размером экрана (ng-srcset)

Question

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

Чтобы добиться этого, я использую ng-srcset как это:

<img ng-src="css/images/1280-iphone5.png" ng-srcset="css/images/iphone5-mobile.png 640w" />

Этот код работает, но время от времени, когда я перезагружаю веб-сайт на моем компьютере, отображается изображение "по умолчанию" (1280-iphone5.png), но оно намного больше обычного размера.

Есть идеи, что я делаю не так?

Заранее спасибо!

Answer 1

Я бы порекомендовал psResponsive.

Вы можете настроить размеры экрана, используя psResponsiveConfig

angular.module('psResponsive', [])
  .value('psResponsiveConfig', {
    sizes: [{
        name: 'small',
        minWidth: 640
    }, {
        name: 'medium',
        minWidth: 880
    }, {
        name: 'large',
        minWidth: 1024
    }]
});

И используйте имена этих размеров в вашем контроллере.