Question

我在<img>标签中使用ng-src，但每当我在点击下一个或上一个按钮时更改ng-src时，它会在浏览器中加载图像（在网络选项卡中选中），尽管所有图像已加载。因此，点击下一个或上一个按钮不能提供流畅的体验，图像首先由浏览器再次下载然后再渲染。

有人可以帮我解决这个问题，以便不需要通过发出新的HTTP请求来加载已经由浏览器加载的图像。

<div class="slider" ng-style="{'width': ctrl.options.width,'height':ctrl.options.height}">
    <img class="materialboxed mainImage"
         ng-style="{'width': ctrl.options.width,'height':ctrl.options.height}"
         ng-src="{{ctrl.data[ctrl.currentImageIndex]}}">
    <i class="material-icons icon-arrow_left"
       ng-if="ctrl.displayLeftArrow"
       ng-click="ctrl.prevImg()">keyboard_arrow_left
    </i>
    <i class="material-icons icon-arrow_right"
       ng-if="ctrl.displayRightArrow"
       ng-click="ctrl.nextImg()">keyboard_arrow_right
    </i>
</div>

以下是我正在使用的图像数组：

[
        'https://static.pexels.com/photos/257360/pexels-photo-257360.jpeg',
        'https://lorempixel.com/580/250/nature/1',
        'https://lorempixel.com/580/250/nature/2',
        'https://lorempixel.com/580/250/nature/3',
        'https://lorempixel.com/580/250/nature/4',
    ]

控制器在这里：

    preloader.preloadImages($scope.data);

    self.init = function () {
        self.currentImageIndex = 0;
        checkArrowVisibility();
    };

    self.prevImg = function () {
        self.currentImageIndex--;
        checkArrowVisibility();
    };
    self.nextImg = function () {
        self.currentImageIndex++;
        checkArrowVisibility();
    };

$ scope.data包含images数组

Answer 1

如果您通过$ http服务使用，则可以通过将cache参数设置为true来启用缓存：

maven-assembly-plugin

否则使用<dependencies> ... </dependencies> <build> <plugins> <plugin> <artifactId>maven-assembly-plugin</artifactId> <configuration> <descriptorRefs> <descriptorRef>jar-with-dependencies</descriptorRef> </descriptorRefs> <executions> <execution> <id>make-assembly</id> <phase>package</phase> <goals> <goal>single</goal> </goals> </execution> </executions> </configuration> </plugin> </plugins> </build>手动缓存数据。

Answer 2

据我所知，您使用preloader.preloadImages($scope.data);预先加载所有图像。在这种情况下，更容易不花时间以编程方式进行，而只是让浏览器完成它的工作。为了实现这一点，我建议将滑块的所有图像放入DOM中，并根据需要显示/隐藏它们，而不是设置不同的src（这实际上是一次又一次地触发图像的重新加载）。

这里的重要部分是<img ng-src="{{img}}" ng-repeat="img in ctrl.data" ng-show="$index === ctrl.cur" ...>。请注意，您应该使用ng-show而不是ng-if！您也可以使用$index添加ng-repeat，这在这种情况下非常方便。

angular.module('app', []).controller('ctrl', function() {
  this.cur = 0;
  this.data = [
    'https://static.pexels.com/photos/257360/pexels-photo-257360.jpeg',
    'https://lorempixel.com/580/250/nature/1/',
    'https://lorempixel.com/580/250/nature/2/',
    'https://lorempixel.com/580/250/nature/3/',
    'https://lorempixel.com/580/250/nature/4/'
  ];
  this.width = 'auto';
  this.height = '250px'
})

<!DOCTYPE html>
<html ng-app="app">

  <head>
    <script data-require="angular.js@1.6.5" data-semver="1.6.5" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller="ctrl as ctrl">
    <h1>Slider</h1>
    <div>
      <img ng-src="{{img}}" ng-repeat="img in ctrl.data" ng-show="$index === ctrl.cur" alt="Image #{{$index}}" ng-style="{'width':ctrl.width, 'height': ctrl.height}"/>
      <br/>
      <button ng-click="ctrl.cur = ctrl.cur - 1" ng-show="ctrl.cur > 0">Previous</button>
      <button ng-click="ctrl.cur = ctrl.cur + 1" ng-show="ctrl.cur < ctrl.data.length - 1">Next</button>
    </div>
  </body>

</html>

Plunker ：https://plnkr.co/edit/Mz9fo2MgcA36DYhQ8uRj?p=preview

您可以在开发工具的网络选项卡中看到图片仅加载一次。

Angularjs - 加载多次的相同图像

2 个答案: