在浏览器缓存中存储图像 - 加载图像的最佳方式

我目前正在通过它们加载不同断点（桌面，平板电脑，手机）和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

在浏览器缓存中存储图像 - 加载图像的最佳方式

回答

相关问题