Question

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

Answer 1

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

您可以通过向图像发送缓存标头来进一步改进这一点，这会阻止浏览器在缓存后对图像发出HTTP请求。

Answer 2

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

class User < ActiveRecord::Base
  def self.from_omniauth(auth)
    where(provider: auth.provider, uid: auth.uid).first_or_initialize.tap do |user|
      user.provider = auth.provider
      user.uid = auth.uid
      user.name = auth.info.name
      user.first_name = auth.info.first_name
      user.last_name = auth.info.last_name
      user.oauth_token = auth.credentials.token
      user.oauth_expires_at = Time.at(auth.credentials.expires_at)
      user.save!
    end
  end
end

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

现在，浏览器甚至不应该为缓存的图像请求更新版本，删除“304”请求。

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

2 个答案: