Храните изображения в кеше браузера - оптимальный способ загрузки изображений

0

В настоящее время я загружаю несколько изображений для разных точек останова (рабочий стол, планшет, мобильный) и 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
                }
            ]
        };
  • 0
    В desktop.png GET 304 png angular.js:3151 243 B 4 ms , 304 - это код состояния HTTP? Вам действительно нужно перенаправить эти запросы?
  • 0
    @ThomasLandauer Код состояния HTTP 304 не является перенаправлением.
Показать ещё 2 комментария
Теги:
image

2 ответа

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".

0

Код статуса 304 означает, что вы сказали браузеру, что изображение не было изменено, поэтому его не нужно повторно загружать.

Вы можете улучшить это дальше, отправив заголовки кеширования с изображением, что остановит браузер, даже сделав HTTP-запрос для изображения после его кэширования.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню