title: Store images in browser cache - optimal way to load images
body: <p>I'm currently loading multiple images for different breakpoints (desktop, tablet, mobile) and <code>ng-repeating</code> through them, then hiding the images that shouldn't currently be shown:</p>
  
  <pre><code>&lt;img ng-repeat="img in module.imgs" src="{{img.src}}" class="image-{{img.type}}" style="top: {{img.pos}}px"&gt;
  </code></pre>
  
  <p>This <code>ng-repeat</code> causes all three image elements to be loaded as elements when only one is shown at a time. </p>
  
  <pre><code>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    
  </code></pre>
  
  <p>To improve this, I tried loading only the image that meets the current breakpoint:</p>
  
  <pre><code>&lt;img src="{{image.src}}" class="image-{{image.type}}" style="top: {{image.pos}}px"&gt;
  
      $scope.$watch($scope.getWindowDimensions, function (newValue, oldValue) {
          $scope.windowHeight = newValue.h;
          $scope.windowWidth = newValue.w;
          $scope.image = null;
  
          if ($scope.windowWidth &gt;= breakPoints['desk']) {
              $scope.image =  $scope.module.imgs[0];
          } else if ($scope.windowWidth &gt;= breakPoints['mid']) {
              $scope.image =  $scope.module.imgs[1];
          } else {
              $scope.image =  $scope.module.imgs[2];
          }
  
      }, true);
  </code></pre>
  
  <p>Unfortunately, each time I hit a breakpoint, it requests the image even if they've been loaded:</p>
  
  <pre><code>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    
  </code></pre>
  
  <p>How can I cache or otherwise store these images such that they're loaded as needed once?</p>
  
  <p>Controller datastructure:</p>
  
  <pre><code>$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
                  }
              ]
          };
  </code></pre>