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

Store images in browser cache - optimal way to load images

本文关键字：图像 加载 方式 最佳 缓存 存储 浏览器      更新时间：2023-09-26

我目前正在为不同的断点（台式机、平板电脑、移动设备）和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
                }
            ]
        };

304状态代码表示您已告知浏览器图像尚未修改，因此无需重新下载。

您可以通过将缓存头与图像一起发送来进一步改进这一点，这将在缓存图像后停止浏览器甚至对图像发出HTTP请求。

也许您需要在服务器上设置一个缓存指令，如下所示：

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

在这种情况下，缓存持续时间非常长，因此在图像更改时请记住这一点。基本上，这是缓存图像最有效的方法，但当图像内容发生变化时，您需要更改图像名称。或者将值设置得更低（以秒为单位）。

现在，浏览器甚至不应该要求缓存图像的更新版本，从而消除"304"请求。

相关文章：