В настоящее время я загружаю несколько изображений для разных точек останова (рабочий стол, планшет, мобильный) и ng-repeating
через них, а затем скрываю изображения, которые в настоящее время не отображаются:
<img ng-repeat="img in module.imgs" src="{{img.src}}" class="image-{{img.type}}" style="top: {{img.pos}}px">
Этот ng-repeat
заставляет все три элемента изображения загружаться как элементы, когда показывается только один.
desktop.png GET 304 png angular.js:3151 243 B 4 ms
tablet.png GET 304 png angular.js:3151 243 B 5 ms
mobile.png GET 304 png angular.js:3151 243 B 3 ms
Чтобы улучшить это, я попытался загрузить только изображение, соответствующее текущей точке останова:
<img src="{{image.src}}" class="image-{{image.type}}" style="top: {{image.pos}}px">
$scope.$watch($scope.getWindowDimensions, function (newValue, oldValue) {
$scope.windowHeight = newValue.h;
$scope.windowWidth = newValue.w;
$scope.image = null;
if ($scope.windowWidth >= breakPoints['desk']) {
$scope.image = $scope.module.imgs[0];
} else if ($scope.windowWidth >= breakPoints['mid']) {
$scope.image = $scope.module.imgs[1];
} else {
$scope.image = $scope.module.imgs[2];
}
}, true);
К сожалению, каждый раз, когда я нажимаю точку останова, он запрашивает изображение, даже если он был загружен:
desktop.png GET 304 png angular.js:3151 243 B 4 ms
tablet.png GET 304 png angular.js:3151 243 B 5 ms
mobile.png GET 304 png angular.js:3151 243 B 3 ms
tablet.png GET 304 png angular.js:3151 243 B 4 ms
mobile.png GET 304 png angular.js:3151 243 B 5 ms
Как я могу кэшировать или иным образом хранить эти изображения так, чтобы они загружались по мере необходимости один раз?
Конфигурация контроллера:
$scope.module = {
imgs: [
{
type: 'desktop',
src: 'img/desktop.png',
pos: 0
},
{
type: 'tablet',
src: 'img/tablet.png',
pos: 0
},
{
type: 'mobile',
src: 'img/mobile.png',
pos: 0
}
]
};
Возможно, вам нужно настроить директиву кэширования на вашем сервере, например:
<FilesMatch "\.(png|jpg|json)$">
FileETag None
<ifModule mod_headers.c>
Header unset ETag
Header set Cache-Control "max-age=604800, public"
</ifModule>
</FilesMatch>
В этом случае продолжительность кэширования очень велика, поэтому помните об этом при изменении изображения. В основном это самый эффективный способ кэширования изображения, но вам нужно изменить имя изображения, когда его содержимое изменится. Или вы устанавливаете значение ниже (его в секундах).
Теперь браузер не должен даже запрашивать более новую версию для кэшированного изображения, уничтожая запрос "304".
Код статуса 304
означает, что вы сказали браузеру, что изображение не было изменено, поэтому его не нужно повторно загружать.
Вы можете улучшить это дальше, отправив заголовки кеширования с изображением, что остановит браузер, даже сделав HTTP-запрос для изображения после его кэширования.
desktop.png GET 304 png angular.js:3151 243 B 4 ms
, 304 - это код состояния HTTP? Вам действительно нужно перенаправить эти запросы?304
не является перенаправлением.