Angularjs - 加载多次的相同图像
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Angularjs - 加载多次的相同图像相关的知识，希望对你有一定的参考价值。
我在<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数组
据我所见，您使用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>如果您通过$ http服务使用，则可以通过将cache参数设置为true来启用缓存：
$http({
method: 'GET',
url: '/api/images',
cache: true
});
否则使用'$cacheFactory'to手动缓存数据。
以上是关于Angularjs - 加载多次的相同图像的主要内容，如果未能解决你的问题，请参考以下文章