2

我使用 AngularJS 创建了一个幻灯片应用程序，该应用程序使用由特定标签过滤的 Instagram 照片。这是演示和GitHub 存储库。

根据 AngularJS 的原理，循环遍历这些图像的最有效方法是什么？

目前，我使用 a$timeout将第一个元素移动到images数组的底部，并结合 CSS 隐藏除第一个之外的所有其他图像：

$scope.images = [
    'image-001.jpg',
    'image-002.jpg',
    'image-003.jpg'
];

$timeout( function advanceSlide() {
    $scope.images.push( $scope.images.shift() );
    $timeout( advanceSlide, 6000 );
);

演示：http: //jsfiddle.net/YruT6/1/

另一种选择是遍历photos对象并应用一个active类，如此处所示。那会不会占用更少的资源？

4

1 回答 1

5

您的解决方案工作正常，但使用中继器可能不是最佳策略，因为：

  • 所有的图像都会一直在 DOM 中
  • 使用中继器并操作数组将导致中继器重新计算和 DOM 重新洗牌。

因此，对于更大的幻灯片，您将在 DOM 中拥有许多元素，并且频繁/缓慢地进行 DOM 操作。我可以提出一种替代方法：

$scope.imgIndex = 0;
$timeout(function advanceSlide() {
    $scope.imgIndex = ($scope.imgIndex + 1) % $scope.images.length; 
    $timeout(advanceSlide, 1000);
});

然后在模板中：

<div ng-app ng-controller="slideshow">
    <img ng-src="{{images[imgIndex].src}}">
</div>​

这是一个 jsFiddle：http: //jsfiddle.net/ThmeZ/6/

于 2012-11-26T11:34:06.723 回答