在瀏覽器緩存中存儲圖像 - 加載圖像的最佳方式

我目前正在通過它們加載不同斷點（桌面，平板電腦，手機）和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 
       } 
      ] 
     };

來源

2015-12-02 Growler

在'desktop.png GET 304 png angular.js：3151 243 B 4 ms'，是304的HTTP狀態碼？你真的需要重定向這些請求嗎？ –

@ThomasLandauer'304' HTTP狀態碼不是重定向。 – Fenton

@索尼：謝謝，剛纔注意到我自己;-)'304'是'Not Modified'。 –

的304狀態代碼意味着你已經告訴了圖像沒有被修改了瀏覽器，所以它並不需要重新下載。

你可以通過發送緩存頭與圖像，這將停止瀏覽器甚至一旦它緩存圖像的HTTP請求進一步改善。

來源

2015-12-02 21:24:18 Fenton

也許你需要安裝一個緩存指令在服務器上，像這樣：

<FilesMatch "\.(png|jpg|json)$"> 
    FileETag None 
    <ifModule mod_headers.c> 
     Header unset ETag 
     Header set Cache-Control "max-age=604800, public" 
    </ifModule> 
</FilesMatch>

在這種情況下，緩存持續時間很長，所以記住這一點，當你的形象變化。基本上這是緩存圖像的最有效方式，但是當內容更改時需要更改圖像名稱。或者您將值設置得更低（以秒爲單位）。

現在，瀏覽器甚至不會要求緩存圖像的更新版本，而是刪除「304」請求。

來源

2015-12-02 21:26:09

在瀏覽器緩存中存儲圖像 - 加載圖像的最佳方式

回答

相關問題